在使用layui的分頁功能時產生了一個誤區,最開始我寫成了用Ajax去請求數據庫信息,然后再在成功返回的代碼中使用layui的分頁
1 Ajax{ 2 ...... 3 ...... 4 success:function(res){ 5 laypage.render({ 6 //使用返回的數據設置參數 7 }) 8 } 9 }
這樣會產生一個嚴重的問題,就是會先把數據查了再分頁,而不是查看下一頁,或跳轉指定頁再去查詢數據庫,當數據庫中的記錄太多的時候會導致頁面卡頓,等待數據返回
為了解決這個問題,改用另外的方式寫:
var table = layui.table; table.render({ elem:'#tableDiv',//要顯示位置元素的id url:'query/searchList',//查詢數據的路徑 request:{ pageNum:'currPage',//頁碼的參數名稱,默認:page limitName:'pageSize'//每頁顯示數據條數的參數名,默認:limit }, where{ //其余要傳的參數 }, limit:10, done:function(res,curr,count){ //如果是異步請求數據的方式,res即為你接口返回的信息 //如果是直接賦值的方式,res為:{data:[],count:99};data為當前數據頁數,count為數據總長度 } })
這樣就可以正確的分頁