這次記錄下藉助layui框架實現的分頁功能，本人使用的是layui的1.0.9版本。首先還是來複習下layui分頁需要掌握的知識點，再通過實際案例來說明下具體這麼用。

一 載入模組

首先，在使用layui的分頁模組時，要載入需要使用到的分頁模組，而根據layui的官方文件說明，一共有預先載入和按需載入兩種方式。但是官方建議使用預先載入的方式，因為這樣可以避免到處寫layui.use([])的麻煩。（但是由於剛開始使用layui還不太熟悉且只用到這一個功能，所以我是按需載入的方式。大家還是按照官方推薦吧！）

layui.use(['laypage', 'layer'], function() {
          var laypage = layui.laypage 
, layer = layui.layer;  //獲取laypage、layer模組
         // TODO                
});
 

二  laypage

laypage包含很多引數，但並不是所有的都要填上，下面介紹幾個最常用的，也是很重要的。其他的引數項文件也有介紹，是否使用要看你的分頁的需求了。
如文件所述，con的值就是body裡的存放分頁的容器的id名；pages 是分頁數，它是獲取返回到的，是一共有多少頁，這兩項是必填項。
最後一個必填項就是jump，點選頁數會觸發這個引數的回撥函式，obj裡包含了說有laypage需要的配置資訊，是有服務端返回的，包括pages,curr(當前頁數)等。

三 例項說明

先說下業務需求：根據ajax獲取的資料進行分頁展示，每頁展示十條資料。下面貼出主要程式碼：

var currPage =1;
 

function getListData(){
              $.ajax({
                  type: 'POST',
                  url: "", // ajax請求路徑
                  data: {
                      page:currPage, //當前頁數
                      rows:10
                  },
                  dataType:'json',
                  success: function(data){
                      data = JSON.parse(data);
                      pageCount =data.result.pageCount;
                      shuju(data.result.dataList);
                      paged(data);
                  }
              });
          };
 

這裡的data傳的引數是根據後臺的需要傳的，設計的是前端傳給後臺一個當前頁數，然後後臺將查出的資料返回給前端，rows是根據需求一頁展示10條資料。請求成功後呼叫shuju()方法，這個方法是用來拼接資料展示在頁面上的，這裡就不展示了；paged()方法則是實現分頁功能。

function paged(data){
              layui.use(['laypage', 'layer'], function() {
                  var laypage = layui.laypage
                      , layer = layui.layer;
                  var nums =10; //每頁出現數量

                  laypage({
                      cont:'split' // 容器id
                      , pages: pageCount //總頁數
                      , curr: currPage
                      , jump: function (obj,first) {
                          currPage =obj.curr;  //這裡是後臺返回給前端的當前頁數
                          if(!first){ //點選跳頁觸發函式自身，並傳遞當前頁：obj.curr  ajax 再次請求
                              getListData(currPage);
                          }
                      }
                  });
              });
          }

程式碼貼出來後再看，發現還挺簡單的，但是不知道為什麼做的時候我感覺好麻煩好麻煩，可能還是個人能力不夠好，還需要繼續努力，道阻且長。 以上~~~