js php分页,js实现分页显示的代码

本文主要和大家分享js实现分页显示的代码，希望能帮助到大家。

1.HTML页面中代码如下

2.HTML中js代码引用

$(function() {

// 初始化信息

paginate.use(1, 5);

page(1);

});

// 初始化变量

var url = model.bhost + "api/article/list.ht?type=1";

var template = $("#list_info").html();

/**翻页 */

function page(page){

paginate.goPage({url:url,template:template,contaner:".cbp_tmtimeline",page:page});

}

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、接口返回类型