淺談js分頁的幾種方法


一個項目中必然會遇到分頁這種需求的,分頁可以使數據加載更合理,也讓頁面顯示更美觀,更有層次感!那么js分頁到底如何實現呢?下面我就來講一下三種循序漸進的方法

1.自己純手寫分頁

 

更深入的去理解分頁的意義如分頁的原理,其實,嘗試自己去寫一些分頁方法是再合適不過的了,可以封裝成一個分頁方法,但是呢,這里呢,我就寫一下最簡單的指定的分頁方法 ,就不去封裝了。就以下圖為例:

 

上圖是個非常普通的分頁。第一個文本框可以輸入頁碼。點擊Go去查詢指定的頁數。后面兩個按鈕分別是上一頁和下一頁。這里面就沒有寫第一頁和最后一頁了。以下是html和js代碼段。寫的比較繁瑣,如果有好的建議還請多多指教

 1 //html
 2 <dl class="all_dl cleanfloat currendl">
 3                 <dt><input type="text" value="0" data-page="1">&nbsp;/&nbsp;<span data-pagecount="4">4頁</span><a class="go">GO</a></dt>
 4                 <dd>
 5                     <a class="prev"><i class="layui-icon" style="font-size: 16px; color: #cacaca;"> </i></a>
 6                     <a class="next"><i class="layui-icon" style="font-size: 16px; color: #cacaca;"> </i></a>
 7                 </dd>
 8             </dl>
 9 /*上一頁*/
10 $(document).on("click", "a.prev", function () {
11 
12     var currentPage = $(this).parent().parent().find("dt input").val();
13     var allPage = $(this).parent().parent().find("dt span").attr('data-pagecount');    
14     if (allPage == 1) {
15         layer.alert("已經是當前頁了");
16         return;
17     }
18     if (currentPage == 1) {
19         layer.alert("已經是第一頁了");
20         return;
21     }
22     else {
23         var all_prev = layer.load();
24         var currentPage = parseInt(currentPage) - 1;
25         saleStaffAll(currentPage);
26         layer.close(all_prev);
27     }
28 
29 })
30 /*下一頁*/
31 $(document).on("click", "a.next", function () {
32     var currentPage = $(this).parent().parent().find("dt input").val();
33     var allPage = $(this).parent().parent().find("dt span").attr('data-pagecount');
34     if (allPage == 1) {
35         layer.alert("已經是當前頁了");
36         return;
37     }
38     if (currentPage == allPage) {
39         layer.alert("已經是最后一頁了");
40         return;
41     }
42     else {
43         var all_next = layer.load();
44         var currentPage = parseInt(currentPage) + 1;
45         saleStaffAll(currentPage);//查詢數據主體方法
46         layer.close(all_next);
47     }
48 
49 })
50 /*數據Go*/
51 $(document).on("click", "dl.all_dl dt a.go", function () {
52     var currentPage = $(this).parent().find("input").val();
53     var allPage = $(this).parent().find("span").attr('data-pagecount');
54     if (!(CheckNumber(currentPage))) {
55         layer.alert("輸入的數字不正確");
56         return;
57     }
58     if (currentPage == allPage) {
59         layer.alert("已經是當前頁了");
60         return;
61     }
62     if (parseInt(currentPage) > parseInt(allPage)) {
63         layer.alert("頁碼不能大於總頁數");
64         return;
65     }
66     if (parseInt(currentPage) < parseInt(allPage)) {
67         var all_pn = layer.load();
68         saleStaffAll(currentPage);
69         layer.close(all_pn);
70         return;
71     } else {
72         layer.alert("您輸入的頁碼數不正確");
73         return;
74     }
75 
76 })

2.用jquery pagination ajax分頁插件 這個插件我已詳細講解過了,可以參考本鏈接[淺談 jQurey Pagination Ajax 分頁插件的使用]

3.layui的分頁插件

現在就我個人而言,比較喜歡用賢心的layui分頁插件layui.laypage。那就大致講一下如何使用。其實非常的簡單便捷。

   1).引入layui.css和layui.js

   2).聲明並初始化

 1 layui.use(['laypage', 'layer'], function(){
 2   var laypage = layui.laypage
 3   ,layer = layui.layer;
 4   
 5   laypage({
 6     cont: 'demo1'//容器。值支持id名、原生dom對象,jquery對象。
 7      skin: '#4985d7',//可以自定義容器的顏色
 8      pages: 10, //總頁數
 9      curr: 1, //初始化當前頁                                                      
10       jump: function (obj, first) { //觸發分頁后的回調
11           if (!first) { //點擊跳頁觸發函數自身,並傳遞當前頁:obj.curr
12               searchFun(keyword, obj.curr);//查詢主體方法
13           }
14       }
15   });
16  })

3.以上的話,就可以看到一個非常實用的分頁插件了。如下圖

總結

方法千萬種,最重要的是你要理解了其中的邏輯。自然不會難倒你了。我個人以前並不喜歡用插件,比較喜歡純手寫,因為這樣的話,不管是樣式還是邏輯都比較好控制,但是呢,也有考慮不到的地方,現在呢,越來越油條了,喜歡用插件去代替了,但是不管做什么,都要去領會其中的思路是最重要的。后期的話,針對layui的使用,也會多寫寫這方面的所遇到的問題與解決方法。如果針對分頁還有不懂的童鞋,可以給我留言你的問題。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM