你的位置:首页 > 软件开发 > Java > 分享非常好用的前端分页js工具类 灵活 简单易懂

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

发布时间:2017-09-28 10:00:26
分享自己封装的前端分页js工具类 下面是默认样式效果截图可以随意更改js及css 很灵活 1 /** 2 * pageSize, 每页显示数 3 * pageIndex, 当前页数 4 * pageCount 总页数 5 * url 连接地址 6 * pager(10, ...

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

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

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

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

 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) {//当前页数>总页数-323    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方法的名称


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

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

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。