拿來主義：layPage分頁插件的使用
布衣之談
所謂插件，大概就是項目中可插可拔的比較小功能化的組件；這些功能組件若能力可及，自己也可以完成——也即自己造輪子，但翻看各種技術社區，相關領域的神人們往往會有更好的實現方案貢獻出來，這個時候你只需要滿懷崇敬之心、感激之情，在遵循別人的使用約定的前提下拿過來應用在自己的項目中即可，省卻了很多自造車輪的成本。就像蘋果造機，雖名蘋果，但其零部件全都是世界各地各個功能廠商共同貢獻的結果。編程亦是此理，博主入編程的坑稍晚，但也越發的感覺到，在各種功能組件以及技術框架越來越普遍且適用的今天，正是依靠技術互助共享的精神力量，編程才變得越來越簡單、快捷的。瞎嗶嗶了這麽多，博主只想說，我雖沒有造輪子的能力，但力所能及的，就是盡量將自己的技術積累以博客的形式記錄、分享，自己成長為大菜鳥的同時，也期望能幫到更多的小菜鳥——造車輪子咱不會，但告訴別人如何使用，也算是功德一件。
layPage分頁插件使用
分頁是項目中比價常見的功能，所以網上分頁插件也很多，功能都大同小異，也都很好用，只是頁面風格不同而已，在實際項目中根據自己項目的界面風格選擇合適的一款就好。本篇主要介紹前端框架Layui中眾多功能組件之一的分頁組件——layPage的使用。廢話已多說完畢，直接進入正題。頁面插件的使用離不開js和css的支持，所以先去官網下載壓縮包，解壓獲取其中的js和css導入自己的前端頁面。博主測試的頁面因為同時引用了bootstrap的樣式，和layui的樣式有些沖突，會對插件的渲染效果有些微的影響。我們在使用第三方插件時，肯定先要根據官方文檔結合demo去學習,這些樣例包含有各種樣式可供選擇，總有一款適合你——
結合官方的示例代碼，我們就可以根據自己的界面效果來應用插件了。先上簡單的前端頁面——
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <html> 3 <head> 4 <title></title> 5 <link rel="stylesheet" type="text/css" href="${BASE_PATH}/Plugins/layui/css/layui.css"> 6 <link rel="stylesheet"href="${BASE_PATH}/Plugins/bootstrap/css/bootstrap.min.css" type="text/css"></link> 7 <script type="text/javascript" src="${BASE_PATH}/Plugins/jquery/jquery-1.12.4.min.js"></script> 8 <script type="text/javascript" src="${BASE_PATH}/Plugins/layui/js/layui.all.js"></script> 9 <script type="text/javascript" src="${BASE_PATH}/Themes/Default/js/test.js"></script> 10 <style type="text/css"> 11 .table th, .table td{ 12 text-align : center; 13 vertical-align : middle!improtant; 14 } 15 .container { 16 width : 60%; 17 } 18 </style> 19 </head> 20 <body> 21 <div class="container content"> 22 <div class="row"> 23 <div> 24 <div class="panel panel-green margin-bottom-40"> 25 <div class="panel-heading"> 26 <h1 class="panel-title">layPage測試</h1> 27 </div> 28 <div class="panel-body"> 29 <div> 30 <div> 31 <table class="table table-bordered table-striped"> 32 <thead> 33 <tr> 34 <th>序號</th> 35 <th>姓名</th> 36 <th>年齡</th> 37 <th>操作</th> 38 </tr> 39 </thead> 40 <!-- 表格數據加載 --> 41 <tbody id="tab_list"> 42 </tbody> 43 </table> 44 </div> 45 </div> 46 </div> 47 </div> 48 </div> 49 </div> 50 <!-- 存放分頁的容器 --> 51 <div id="layui"></div> 52 </div> 53 </body> 54 </html>
上面的前端頁面很簡單，根據官方文檔，我們需在合適的位置提供一個存放分頁控件的 div 容器。然後是 js 頁面——
1 $(function () { 2 initLayPage(); 3 }); 4 5 /** 6 * 初始化layui分頁 7 */ 8 9 function initLayPage(pageConf) { 10 if(!pageConf){ 11 pageConf ={}; 12 pageConf.pageSize = 10; 13 pageConf.currentPage = 1; 14 15 } 16 $.post("/test/query", pageConf, function (data) { 17 layui.use([‘laypage‘, ‘layer‘], function () { 18 var page = layui.laypage; 19 page.render({ 20 elem: ‘layui‘, 21 count: data.total, 22 curr: pageConf.currentPage, 23 limit: pageConf.pageSize, 24 first:"首頁", 25 last:"尾頁", 26 layout: [‘count‘, ‘prev‘, ‘page‘, ‘next‘, ‘limit‘, ‘skip‘], 27 jump: function (obj, first) { 28 if (!first) { 29 pageConf.currentPage = obj.curr; 30 pageConf.pageSize = obj.limit; 31 initLayPage(pageConf); 32 } 33 } 34 }); 35 fillTable(data.list,(pageConf.currentPage - 1) * pageConf.pageSize); //頁面填充 36 }) 37 }); 38 } 39 //填充表格數據 40 function fillTable(data,num) { 41 var info = ‘‘; 42 $.each(data, function (index, obj) { 43 // id 很多時候並不是連續的，如果為了顯示比較連續的記錄數，可以這樣根據當前頁和每頁條數動態的計算記錄序號 44 index = index +num+1; 45 info += ‘<tr><td>‘ + index + ‘</td><td>‘ + obj.name + ‘</td><td>‘ + obj.age + ‘</td>‘ + 46 ‘<td style="text-align: center;"><button name="btnModify" type="button" class="btn btn-success btn-xs" >修改</button>‘ + 47 ‘<button name="btnDelete" type="button" class="btn btn-danger btn-xs" onclick="remove(‘ + obj.id + ‘)">刪除</button></td></tr>‘; 48 }); 49 $("#tab_list").html(info); 50 }
對於上面的 js,咋一看有點懵，但我們看一下官方給出的基礎參數選項就比較好理解了——
上面js 中要重點利用的就是切換分頁的回調函數 jump ,該函數在分頁或者每頁顯示條數發生改變時觸發，函數返回兩個參數：obj（當前分頁的所有選項值）、first（是否首次，一般用於初始加載的判斷）。當分頁發生改變時，可以根據obj獲取到改變後的當前頁或者每頁顯示條數，帶著這些參數便可以繼續發送ajax請求後臺獲取數據。對於一些溢出情況，layPage已經做了很好的封裝，比如，每頁顯示20條時當前正在最後一頁（5），當切換到每頁40條的時候，總共只有3頁了，那麽layPage會自動計算並切換到當前的最後一頁第3頁，無需我們自己再去判斷處理。下面就是博主做好的分頁效果—
一切，就是這麽簡單，就像初戀般的感覺。。。
拿來主義：layPage分頁插件的使用