分享非常好用的前端分页js工具类 灵活 简单易懂

分享自己封装的前端分页js工具类  下面是默认样式效果截图

可以随意更改js及css 很灵活

 /**

 * pageSize,  每页显示数
 * pageIndex, 当前页数
 * pageCount  总页数
 * url  连接地址
 * pager(10, 1, 5, 'Index')使用方法示例
 */
 function pager(pageSize, pageIndex, pageCount, url) {
     var intPage = 7;  //数字显示
     var intBeginPage = 0;//开始的页数
     var intEndPage = 0;//结束的页数
     var intCrossPage = parseInt(intPage / 2); //显示的数字

     var strPage = "<div class='fr'><span class='pageinfo'>第 <font color='#FF0000'>" + pageIndex + "/" + pageCount + "</font> 页 每页 <font color='#FF0000'>" + pageSize + "</font> 条</span>";

     if (pageIndex > 1) {
         strPage = strPage + "<a class='pageNav' onclick='" + url + "(1," + pageSize + ")'><span>首页</span></a> ";
         strPage = strPage + "<a class='pageNav' onclick='" + url + "(" + (pageIndex - 1) + "," + pageSize + ")'><span>上一页</span></a> ";
     }
     if (pageCount > intPage) {//总页数大于在页面显示的页数

         if (pageIndex > pageCount - intCrossPage) {//当前页数>总页数-3
             intBeginPage = pageCount - intPage + 1;
             intEndPage = pageCount;
         }
         else {
             if (pageIndex <= intPage - intCrossPage) {
                 intBeginPage = 1;
                 intEndPage = intPage;
             }
             else {
                 intBeginPage = pageIndex - intCrossPage;
                 intEndPage = pageIndex + intCrossPage;
             }
         }
     } else {
         intBeginPage = 1;
         intEndPage = pageCount;
     }

     if (pageCount > 0) {
         for (var i = intBeginPage; i <= intEndPage; i++) {
             {
                 if (i == pageIndex) {//当前页
                     strPage = strPage + " <a class='current' href='javascript:void(0);'>" + i + "</a> ";
                 }
                 else {
                     strPage = strPage + " <a class='pageNav' onclick='" + url + "(" + i + "," + pageSize + ")' title='第" + i + "页'>" + i + "</a> ";
                 }
             }
         }
     }

     if (pageIndex < pageCount) {
         strPage = strPage + "<a class='pageNav' onclick='" + url + "(" + (pageIndex + 1) + "," + pageSize + ")'><span>下一页</span></a> ";
         strPage = strPage + "<a class='pageNav' onclick='" + url + "(" + pageCount + "," + pageSize + ")'><span>尾页</span></a> ";
     }
     return strPage+"</div>";

 }

 <div class="paging">
             <div id="dvPager" class="page fr clearfix" style="margin: 10px 0 15px;"></div>
         </div>

 a{color:#000;text-decoration:none;}
  .clearfix:after {clear: both;content: ".";display: block;font-size:;height:;line-height:;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;}

下面是调用示例 ↓

 function loadData(pageIndex,pageSize){
       $.ajax({
             contentType:"application/json;charset=utf-8",
               url:'?pageNum='+pageIndex+'&pageSize='+pageSize,
               type:"POST",
               dataType:"json",
               success:function(result){
                 if(null != result){

                     )
                     var beginIndex = (pageIndex - 1) * pageSize;
                     var endIndex = pageIndex * pageSize - 1;
                     var pageCount = parseInt((result.totalRecords / pageSize)) + (result.totalRecords % pageSize ? 1 : 0);
                     $('#dvPager').html(pager(pageSize, pageIndex, pageCount, 'loadData'));
             }
     });
  } 

说明：

pager(pageSize, pageIndex, pageCount, 'XXX')该方法 最后传入的参数XXX 是调用js方法的名称