分享非常好用的前端分頁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方法的名稱