本文主要和大家分享js实现分页显示的代码，希望能帮助到大家。
1.html页面中代码如下
<p class="page">
</p>
2.html中js代码引用
<script src="js/jquery.min.js"></script>
<script src="js/model.js"></script>
<script src="js/page.js"></script>
<script type="text/javascript">
$(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});
}
</script>
3、js抽出文件
var paginate={
curpage:1,
totalpage:0,
pagesize:5,
pagehtml:'<a href="javascript:page(${num})">${dpy}</a>', // 页码html模板
totalhtmlbefore:' <a title="total record"><b id="total_num">',//总页数html
totalhtmlafter:'</b></a>',
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、接口返回类型
以上就是js实现分页显示的代码的详细内容。