JS分页方法

最新推荐文章于 2024-02-02 10:01:01 发布

转载最新推荐文章于 2024-02-02 10:01:01 发布 · 146 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yuchenghao/p/7918933.html

index：当前页码；totalNum：接口返回的记录总条数；

 1 function paging(index,totalNum)
 2 {
 3     pageTotal = Math.ceil(totalNum / pagesize);//总的页数
 4     var htmlShow = '';//页码
 5     var top = index == 1 ? 1 : parseInt(index - 1);
 6     var buttom = index == pageTotal ? pageTotal : parseInt(index + 1);
 7     htmlShow += "<li><a class='words wandn' href='javascript:void(0);'  onclick=serach(1)>首页</a>";
 8     htmlShow += "<a class='words wandn' href='javascript:void(0);'  onclick=serach(" + top + ")> <上页</a><span id='htmlnum'></span>";
 9     //判断显示的页码
10     var indexTop = Math.floor((index-1) / 5);
11     var index5 = parseInt(indexTop * 5 + 5) > pageTotal ? pageTotal : parseInt(indexTop * 5 + 5);
12     htmlShow += "<a class='words wandn' href='javascript:void(0);' onclick=serach(" + buttom + ")>下页></a>";
13     htmlShow += "<a class='words wandn' href='javascript:void(0);' onclick=serach(" + pageTotal + ")>末页</a>";
14     htmlShow += "<span class='fy'>" + index + "/" + pageTotal + "</span><div class='zd_page'>转到&nbsp;&nbsp;<input id='btnSelect'/><div class='goout' id='go'>GO</div></div></li>";
15     $("#showPage").html(htmlShow);
16     var htmlnum = "";
17     for (var i = parseInt(indexTop*5+1); i < index5+1; i++) {
18         htmlnum += "<a class='num wandn' href='javascript:void(0);'  onclick=serach(" + i + ")>" + i + "</a>";//展示的数字
19     }
20     $("#htmlnum").html(htmlnum);
21 }

这里第10、11行的5，所产生的效果是每当点击的页码为（5n+1）时，下方的页码开始变动，可以重新设置参数，没必要写死

转载于:https://www.cnblogs.com/yuchenghao/p/7918933.html