13518219792
最近項目要使用layUI的分頁，看了官方demo感覺還是不太清晰，摸索了一下，現在記錄一下。
創新互聯長期為近千家客戶提供的網站建設服務，團隊從業經驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯網生態環境。為陸港企業提供專業的成都網站建設、做網站，陸港網站改版等技術服務。擁有十余年豐富建站經驗和眾多成功案例,為您定制開發。
一、引入layUI的相關資源
//引入jquery包
二、html頁面代碼
當前系統排名：第${scoreRecordUtil.rank}名， 總積分：${scoreRecordUtil.totalScore}分， 和上一名相差：${scoreRecordUtil.differenceTotal}分，繼續加油！
//存放分頁加載數據 積分類型 積分原因 積分值 創建時間
三、定義showReocrd()函數異步加載數據
function showReocrd(pageNo,pageSize){
$.get("${ctxPath}/score-record/showRecord",
{
pageNo:pageNo,
pageSize:pageSize
},
function (date) {
//加載后臺返回的List集合數據
for (var i = 0; i < date.length; i++) {
var td = $("四、分頁js
主要注意下:
count: total 代表總的數據量，
limit 代表每頁行數，
curr 代表起始頁，但jump函數中的obj.curr取的是當前頁數
jump 方法中obj參數可以取到上面的屬性和方法
first 為是否首次加載
//加載總頁數
var total = "${scoreRecordUtil.totalRecord}";
//先初始化加載首頁，十條數據
showReocrd(1,10);
layui.use(['laypage','jquery'], function() {
var laypage = layui.laypage,$ = layui.$;
$(".page").each(function(i,the){
laypage.render({
elem: the //注意，這里的 test1 是 ID，不用加 # 號
,count: total //數據總數，從服務端得到
, limit: 10 //每頁顯示條數
, limits: [10, 20, 30]
, curr: 1 //起始頁
, groups: 5 //連續頁碼個數
, prev: '上一頁' //上一頁文本
, netx: '下一頁' //下一頁文本
, first: 1 //首頁文本
, last: 100 //尾頁文本
, layout: ['prev', 'page', 'next','limit','refresh','skip']
//跳轉頁碼時調用
, jump: function (obj, first) { //obj為當前頁的屬性和方法，第一次加載first為true
//非首次加載 do something
if (!first) {
//清空以前加載的數據
$('tbody').empty();
//調用加載函數加載數據
showReocrd(obj.curr,obj.limit);
}
}
});
})
})推薦：使用layui的table組件自帶分頁功能（異步，含條件查詢）點這里
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創新互聯。
