最近項目要使用layUI的分頁，看了官方demo感覺還是不太清晰，摸索了一下，現在記錄一下。
一、引入layUI的相關資源
<link rel="stylesheet" href="${ctxPath}/vendor/layui-v2.4.5/layui/css/layui.css" >
<script src="${ctxPath}/vendor/layui-v2.4.5/layui/layui.js"></script>
<script src="${ctxPath}/vendor/jquery.min.js"></script>//引入jquery包
二、html頁面代碼
<div class="layui-main g-main">
<div class="layui-row">
<div class="layui-col-xs12">
<blockquote class="layui-elem-quote">
當前系統排名：<span class="layui-badge-rim badge-number">第${scoreRecordUtil.rank}名</span>，
總積分：<span class="layui-badge-rim badge-number">${scoreRecordUtil.totalScore}分</span>，
和上一名相差：<span class="layui-badge-rim badge-number">${scoreRecordUtil.differenceTotal}分</span>，繼續加油！
</blockquote>
<table class="layui-table">
<thead>
<tr>
<th>積分類型</th>
<th>積分原因</th>
<th>積分值</th>
<th>創建時間</th>
</tr>
</thead>
<tbody>
//存放分頁加載數據
</tbody>
</table>
<div class="page"></div>
</div>
</div>
</div>
三、定義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 = $("<td></td>").text(date[i].typeName);
var td2 = $("<td></td>").text(date[i].operate);
var td3 = $("<td></td>").text(date[i].score);
var td4 = $("<td></td>").text(date[i].createTime);
var tr = $("<tr></tr>").append(td, td2, td3, td4);
$('tbody').append(tr);
}
},
"json"
);
}
四、分頁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組件自帶分頁功能（異步，含條件查詢）點這里
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
