layui——分頁(ajax請求)
阿新 • • 發佈:2019-02-08
這次記錄下藉助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;
這裡的data傳的引數是根據後臺的需要傳的,設計的是前端傳給後臺一個當前頁數,然後後臺將查出的資料返回給前端,rows是根據需求一頁展示10條資料。請求成功後呼叫shuju()方法,這個方法是用來拼接資料展示在頁面上的,這裡就不展示了;paged()方法則是實現分頁功能。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); } }); };
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);
}
}
});
});
}
程式碼貼出來後再看,發現還挺簡單的,但是不知道為什麼做的時候我感覺好麻煩好麻煩,可能還是個人能力不夠好,還需要繼續努力,道阻且長。
以上~~~