本文主要和大家分享js实现分页显示的代码，希望能帮助到大家。
1.html页面中代码如下
2.HTML中js代码引用
3、js抽出文件
var paginate={
curPage:1,
totalPage:0,
pageSize:5,
pageHtml:'${dpy}', // 页码html模板
totalHtmlBefore:' ',//总页数html
totalHtmlAfter:'',
use:function(_curPage,_pageSize){
this.curPage = _curPage;
this.pageSize = _pageSize;
},
// 展示分页信息
showPage:function(maxPage, start, curPage){
// 清空分页信息
$(".page").html("");
// 加载分页信息
var list = paginate.createPageData(maxPage, start);
model.loaderList(list, this.pageHtml, ".page");
// 显示总页数
$(".page").append(this.totalHtmlBefore + curPage+"/" +this.totalPage + this.totalHtmlAfter);
// 显示当前页样式
$(".page a").css("color","#aee1ff");
$(".page a[href='javascript:page("+this.curPage+")']").css("color","#FF0000");
},
// 创建页码数据列表
createPageData:function(curPage, start){
var numList = [];
numList.push(paginate.createObj(-1));
for(var i=start; i<=curPage; i++){
var numObj = paginate.createObj(i);
if(numObj != null)
numList.push(numObj);
}
numList.push(paginate.createObj(-2));
return numList;
},
// 创建页码数据
createObj:function(i){
var numObj = {};
if(i == -2){
numObj.num = "-2";
numObj.dpy = ">";
}else if(i == -1){
numObj.num = "-1";
numObj.dpy = "<";
}else{
numObj.num = i+"";
numObj.dpy = i+"";
}
return numObj;
},
getCurPage:function(page){
if(page == "-2"){
paginate.curPage = paginate.curPage +1;
}else if(page == "-1"){
paginate.curPage = paginate.curPage-1;
}else{
paginate.curPage = page;
}
},
// 跳转
goPage:function(params){
// 当前页计算
paginate.getCurPage(params.page);
if(paginate.curPage < 1){
paginate.curPage = 1;
return;
}
// 查询信息
$.get(params.url+"&pageNum="+paginate.curPage+"&pageSize="+paginate.pageSize, function(result) {
// 当前页大于总页数,数据不刷新
paginate.totalPage = result.totalPage;
if(paginate.curPage > result.totalPage){
paginate.curPage = result.totalPage;
return;
}
// 当前页小于6页
if(paginate.curPage < 6){
var maxPage = result.totalPage;
if(maxPage > 5)maxPage=5;
paginate.showPage(maxPage, 1, paginate.curPage);
}else{
paginate.showPage(paginate.curPage, paginate.curPage-4, paginate.curPage);
}
// 列表信息显示
$(params.contaner).html('');
model.loaderList(result.data, params.template, params.contaner);
$(".cbp_tmlabel").css("opacity", "1");// 显示列表信息
});
}
};4、接口返回类型
