淺談js分頁的幾種方法

一個項目中必然會遇到分頁這種需求的，分頁可以使資料加載更合理，也讓頁面顯示更美觀，更有層次感！那麼js分頁到底如何實作呢？下面我就來講一下三種循序漸進的方法

1.自己純手寫分頁

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

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

//html
<dl class="all_dl cleanfloat currendl">
                <dt><input type="text" value="0" data-page="1">&nbsp;/&nbsp;<span data-pagecount="4">4頁</span><a class="go">GO</a></dt>
                <dd>
                    <a class="prev"><i class="layui-icon" style="font-size: 16px; color: #cacaca;"> </i></a>
                    <a class="next"><i class="layui-icon" style="font-size: 16px; color: #cacaca;"> </i></a>
                </dd>
            </dl>
/*上一頁*/
$(document).on("click", "a.prev", function () {

    var currentPage = $(this).parent().parent().find("dt input").val();
    var allPage = $(this).parent().parent().find("dt span").attr('data-pagecount');    
    if (allPage == 1) {
        layer.alert("已經是目前頁了");
        return;
    }
    if (currentPage == 1) {
        layer.alert("已經是第一頁了");
        return;
    }
    else {
        var all_prev = layer.load();
        var currentPage = parseInt(currentPage) - 1;
        saleStaffAll(currentPage);
        layer.close(all_prev);
    }

})
/*下一頁*/
$(document).on("click", "a.next", function () {
    var currentPage = $(this).parent().parent().find("dt input").val();
    var allPage = $(this).parent().parent().find("dt span").attr('data-pagecount');
    if (allPage == 1) {
        layer.alert("已經是目前頁了");
        return;
    }
    if (currentPage == allPage) {
        layer.alert("已經是最後一頁了");
        return;
    }
    else {
        var all_next = layer.load();
        var currentPage = parseInt(currentPage) + 1;
        saleStaffAll(currentPage);//查詢資料主體方法
        layer.close(all_next);
    }

})
/*資料Go*/
$(document).on("click", "dl.all_dl dt a.go", function () {
    var currentPage = $(this).parent().find("input").val();
    var allPage = $(this).parent().find("span").attr('data-pagecount');
    if (!(CheckNumber(currentPage))) {
        layer.alert("輸入的數字不正确");
        return;
    }
    if (currentPage == allPage) {
        layer.alert("已經是目前頁了");
        return;
    }
    if (parseInt(currentPage) > parseInt(allPage)) {
        layer.alert("頁碼不能大于總頁數");
        return;
    }
    if (parseInt(currentPage) < parseInt(allPage)) {
        var all_pn = layer.load();
        saleStaffAll(currentPage);
        layer.close(all_pn);
        return;
    } else {
        layer.alert("您輸入的頁碼數不正确");
        return;
    }

})

           

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

3.layui的分頁插件

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

1.引入layui.css和layui.js

2.聲明并初始化

layui.use(['laypage', 'layer'], function(){
  var laypage = layui.laypage
  ,layer = layui.layer;
  
  laypage({
    cont: 'demo1'//容器。值支援id名、原生dom對象，jquery對象。
     skin: '#4985d7',//可以自定義容器的顔色
     pages: 10, //總頁數
     curr: 1, //初始化目前頁                                                      
      jump: function (obj, first) { //觸發分頁後的回調
          if (!first) { //點選跳頁觸發函數自身，并傳遞目前頁：obj.curr
              searchFun(keyword, obj.curr);//查詢主體方法
          }
      }
  });
 })
  
           

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

總結

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