一、page方法
/******************************************************
* Created User:
* Created Time: 2015/12/5.
* 说 明:分页对象
******************************************************/
function Page(config) {
if (!config) {
config = {};
}
this.page = config.page || 1;
this.pageSize = config.pageSize || 10;
this.numOfPages = config.numOfPages || 5;
//this.startPage=this.getStartPage();
//this.endPage=this.getEndPage();
if (this.page <= 1) {
this.start = 0;
} else {
this.start = (this.page - 1) * this.pageSize;
}
this.end = this.pageSize * this.page;
//if (!config.data) {
// this.data = [];
//}
this.totalCount = config.totalCount || 0;
/**
* 获取总页码数
* @returns {number}
*/
this.getTotalPage = function () {
return Math.ceil(this.totalCount / this.pageSize);
}
/**
* 获取当前开始页面
* @returns {number}
*/
this.getStartPage = function () {
if (this.getTotalPage() < 2) {
return 1;
} else {
var pageStart = (this.page % this.numOfPages === 0) ? (parseInt(this.page / this.numOfPages, 10) - 1) * this.numOfPages + 1 : parseInt(this.page / this.numOfPages, 10) * this.numOfPages + 1;//calculates the start page.
return pageStart;
}
}
/**
* 获取当前结束页面
* @returns {number}
*/
this.getEndPage = function () {
if (this.getTotalPage() < 2) {
return 1;
} else {
var pageStart = (this.page % this.numOfPages === 0) ? (parseInt(this.page / this.numOfPages, 10) - 1) * this.numOfPages + 1 : parseInt(this.page / this.numOfPages, 10) * this.numOfPages + 1;//calculates the start page.
var endP = (pageStart + this.numOfPages - 1) > this.getTotalPage() ? this.getTotalPage() : (pageStart + this.numOfPages - 1);
console.log(pageStart + "...." + endP);
return endP;
}
}
return this;
}
module.exports = Page;
二、使用方法
首先需要获得记录总条数datas.totalCount
var page = new Page({
page: curpage,//当前页
pageSize: 10,//每页记录数
totalCount: datas.totalCount,//总共记录条数
numOfPages: 5,//显示页码数
startPage: 0,//开始页码
endPage: 0//结束页码
});
page.startPage = page.getStartPage();
page.endPage = page.getEndPage();
三、前端样式(使用的express框架)
<div class="col-sm-12 col-md-12 ">
<% if(page.getTotalPage() > 1){ %>
<div style="text-align: right;float:right;margin: 20px 0;padding: 8px 5px 4px 5px;text-decoration: none;">
共<%= page.getTotalPage() %>页(<%= page.totalCount %>条)
</div>
<ul class="pagination pull-right">
<% if((parseInt(page.page) - 1) < 1){ %>
<li class="disabled"><a href="#">«</a></li>
<% }else{ %>
<li><a href="/category/<%= condition.type %>?ipage=<%= i %>">«</a></li>
<% } %>
<% for(var i = page.startPage;i <= page.endPage ;i++){ %>
<% if(page.page == i){ %>
<li class="active"><a href="/category/<%= condition.type %>?ipage=<%= i %>"><%= i %><span
class="sr-only">(current)</span></a></li>
<% }else{ %>
<li><a href="/category/<%= condition.type %>?ipage=<%= i %>"><%= i %><span
class="sr-only">(current)</span></a></li>
<% } %>
<% } %>
<% if( (parseInt(page.page) + 1) > page.getTotalPage()){ %>
<li class="disabled"><a href="#">»</a></li>
<% }else{ %>
<li><a href="/category/<%= condition.type %>?ipage=<%= (parseInt(page.page) + 1) %>">»</a></li>
<% } %>
</ul>
<% } %>
</div>
最终样式: