分享非常好用的前端分页js工具类 灵活 简单易懂
分享自己封装的前端分页js工具类 下面是默认样式效果截图
可以随意更改js及css 很灵活
1 /**
2 * pageSize, 每页显示数 3 * pageIndex, 当前页数 4 * pageCount 总页数 5 * url 连接地址 6 * pager(10, 1, 5, 'Index')使用方法示例 7 */ 8 function pager(pageSize, pageIndex, pageCount, url) { 9 var intPage = 7; //数字显示 10 var intBeginPage = 0;//开始的页数 11 var intEndPage = 0;//结束的页数 12 var intCrossPage = parseInt(intPage / 2); //显示的数字 13 14 var strPage = "<div class='fr'><span class='pageinfo'>第 <font color='#FF0000'>" + pageIndex + "/" + pageCount + "</font> 页 每页 <font color='#FF0000'>" + pageSize + "</font> 条</span>"; 15 16 if (pageIndex > 1) { 17 strPage = strPage + "<a class='pageNav' onclick='" + url + "(1," + pageSize + ")'><span>首页</span></a> "; 18 strPage = strPage + "<a class='pageNav' onclick='" + url + "(" + (pageIndex - 1) + "," + pageSize + ")'><span>上一页</span></a> "; 19 } 20 if (pageCount > intPage) {//总页数大于在页面显示的页数 21 22 if (pageIndex > pageCount - intCrossPage) {//当前页数>总页数-3 23 intBeginPage = pageCount - intPage + 1; 24 intEndPage = pageCount; 25 } 26 else { 27 if (pageIndex <= intPage - intCrossPage) { 28 intBeginPage = 1; 29 intEndPage = intPage; 30 } 31 else { 32 intBeginPage = pageIndex - intCrossPage; 33 intEndPage = pageIndex + intCrossPage; 34 } 35 } 36 } else { 37 intBeginPage = 1; 38 intEndPage = pageCount; 39 } 40 41 if (pageCount > 0) { 42 for (var i = intBeginPage; i <= intEndPage; i++) { 43 { 44 if (i == pageIndex) {//当前页 45 strPage = strPage + " <a class='current' href='javascript:void(0);'>" + i + "</a> "; 46 } 47 else { 48 strPage = strPage + " <a class='pageNav' onclick='" + url + "(" + i + "," + pageSize + ")' title='第" + i + "页'>" + i + "</a> "; 49 } 50 } 51 } 52 } 53 54 55 if (pageIndex < pageCount) { 56 strPage = strPage + "<a class='pageNav' onclick='" + url + "(" + (pageIndex + 1) + "," + pageSize + ")'><span>下一页</span></a> "; 57 strPage = strPage + "<a class='pageNav' onclick='" + url + "(" + pageCount + "," + pageSize + ")'><span>尾页</span></a> "; 58 } 59 return strPage+"</div>"; 60 61 }
1 <div class="paging"> 2 <div id="dvPager" class="page fr clearfix" style="margin: 10px 0 15px;"></div> 3 </div>
a{color:#000;text-decoration:none;} .clearfix:after {clear: both;content: ".";display: block;font-size: 0;height: 0;line-height: 0;visibility: hidden;} .fr{float:none;} .page a{padding:6px 12px;border:1px solid #ddd;float:left;margin-left:-1px;color:#006dae;text-align:center;} .page a:hover{background:#ddd;} .page a.current{background:#006dae;color:#fff;border:1px solid #006dae;cursor: default;} .page .first{margin-right:10px;} .pageinfo{margin-left:10px;padding:6px 12px;border:1px solid #ddd;float:left;color:#006dae;text-align:center;}
下面是调用示例 ↓
1 function loadData(pageIndex,pageSize){ 2 $.ajax({ 3 contentType:"application/json;charset=utf-8", 4 url:'?pageNum='+pageIndex+'&pageSize='+pageSize, 5 type:"POST", 6 dataType:"json", 7 success:function(result){ 8 if(null != result){ 9 10 ) 11 var beginIndex = (pageIndex - 1) * pageSize; 12 var endIndex = pageIndex * pageSize - 1; 13 var pageCount = parseInt((result.totalRecords / pageSize)) + (result.totalRecords % pageSize ? 1 : 0); 14 $('#dvPager').html(pager(pageSize, pageIndex, pageCount, 'loadData')); 15117 } 18 }); 19 }
说明:
pager(pageSize, pageIndex, pageCount, 'XXX')该方法 最后传入的参数XXX 是调用js方法的名称
![](https://images2017.cnblogs.com/blog/533685/201709/533685-20170928093852762-553719758.gif)