layui實現數據分頁功能（ajax異步）
最近項目要使用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"> <table class="layui-table"> <thead> <tr> <th>積分類型</th> <th>積分原因</th> <th>積分值</th> <th>創建時間</th> </tr> </thead> <tbody> //存放分頁加載數據 </tbody> </table> <div id="page"></div> </div> </div> </div>三：定義showRecord()函數異步加載數據
function showRecord(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}"; //先初始化加載首頁，十條數據 showRecord(1,10); layui.use(['laypage','jquery'], function() { var laypage = layui.laypage,$ = layui.$; laypage.render({ elem: $("#page") //注意，這里的 elem 指向存放分頁的容器，值可以是容器ID、DOM對象。 //例1. elem: 'idName' 注意：如果這么寫，這里不能加 # 號 //例2. elem: document.getElementById('idName') //例3. elem: $("#idName") ,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(); //調用加載函數加載數據 showRecord(obj.curr,obj.limit); } } }); }) 這篇文章分頁使用了Jquery拼接元素進行渲染，感覺比較麻煩而且不夠優雅，可以用layui的模板引擎laytpl對分頁數據進行渲染，可參考我另一篇博客：layui實現數據分頁功能（laytpl模板引擎分頁加載）
如果只是table分頁查詢的話，更推薦使用layui自帶的table分頁組件，可參考博客：使用layui的table組件自帶分頁功能（異步，含條件查詢）
歡迎訪問本文的個人博客鏈接： https://br-bai.github.io/2019/01/06/LayUI實現數據分頁功能（Ajax異步）/