拿來主義：layPage分頁插件的使用

時間 2019-11-12

標籤拿來主義 laypage 分頁插件使用简体版

原文原文鏈接

　　布衣之談

　　所謂插件，大概就是項目中可插可拔的比較小功能化的組件；這些功能組件若能力可及，本身也能夠完成——也即本身造輪子，但翻看各類技術社區，相關領域的神人們每每會有更好的實現方案貢獻出來，這個時候你只須要滿懷崇敬之心、感激之情，在遵循別人的使用約定的前提下拿過來應用在本身的項目中便可，省卻了不少自造車輪的成本。就像蘋果造機，雖名蘋果，但其零部件全都是世界各地各個功能廠商共同貢獻的結果。編程亦是此理，博主入編程的坑稍晚，但也愈加的感受到，在各類功能組件以及技術框架愈來愈廣泛且適用的今天，正是依靠技術互助共享的精神力量，編程才變得愈來愈簡單、快捷的。瞎嗶嗶了這麼多，博主只想說，我雖沒有造輪子的能力，但力所能及的，就是儘可能將本身的技術積累以博客的形式記錄、分享，本身成長爲大菜鳥的同時，也指望能幫到更多的小菜鳥——造車輪子咱不會，但告訴別人如何使用，也算是功德一件。javascript

　　layPage分頁插件使用

　　分頁是項目中比價常見的功能，因此網上分頁插件也不少，功能都大同小異，也都很好用，只是頁面風格不一樣而已，在實際項目中根據本身項目的界面風格選擇合適的一款就好。本篇主要介紹前端框架Layui中衆多功能組件之一的分頁組件——layPage的使用。廢話已多說完畢，直接進入正題。頁面插件的使用離不開js和css的支持，因此先去官網下載壓縮包，解壓獲取其中的js和css導入本身的前端頁面。博主測試的頁面由於同時引用了bootstrap的樣式，和layui的樣式有些衝突，會對插件的渲染效果有些微的影響。咱們在使用第三方插件時，確定先要根據官方文檔結合demo去學習,這些樣例包含有各類樣式可供選擇，總有一款適合你——
css

　　結合官方的示例代碼，咱們就能夠根據本身的界面效果來應用插件了。先上簡單的前端頁面——html

 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}/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 頁面——前端

$(function () {
    initLayPage();
});

/**
 * 初始化layui分頁
 */

function initLayPage(pageConf) {
    if (!pageConf) {
        pageConf = {};
        pageConf.pageSize = 10;
        pageConf.currentPage = 1;

    }
    $.post("/test/query", pageConf, function (data) {
        layui.use(['laypage', 'layer'], function () {
            var page = layui.laypage;
            page.render({
                elem: 'layui',
                count: data.total,
                curr: pageConf.currentPage,
                limit: pageConf.pageSize,
                first: "首頁",
                last: "尾頁",
                layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                jump: function (obj, first) {
                    if (!first) {
                        pageConf.currentPage = obj.curr;
                        pageConf.pageSize = obj.limit;
                        initLayPage(pageConf);
                    }
                }
            });
            fillTable(data.list, (pageConf.currentPage - 1) * pageConf.pageSize); //頁面填充
        })
    });
}

//填充表格數據
function fillTable(data, num) {
    $("#tab_list").html('');
    $.each(data, function (index, obj) {
        // id 不少時候並非連續的，若是爲了顯示比較連續的記錄數，能夠這樣根據當前頁和每頁條數動態的計算記錄序號
        index = index + num + 1;
        var info = '';
        info += '<tr>';
        info += '<td>' + index + '</td>';
        info += '<td>' + obj.name + '</td>';
        info += '<td>' + obj.age + '</td>';
        info += '<td style="text-align: center;"><button name="btnModify" type="button" class="btn btn-success btn-xs" >修改</button><button name="btnDelete" type="button" class="btn btn-danger btn-xs" onclick="remove(' + obj.id + ')">刪除</button></td>';
        info += '</tr>';
        $("#tab_list").append(info);
    });
}

　　對於上面的 js,咋一看有點懵，但咱們看一下官方給出的基礎參數選項就比較好理解了——java

　　上面js 中要重點利用的就是切換分頁的回調函數 jump ,該函數在分頁或者每頁顯示條數發生改變時觸發，函數返回兩個參數：obj（當前分頁的全部選項值）、first（是否首次，通常用於初始加載的判斷）。當分頁發生改變時，能夠根據obj獲取到改變後的當前頁或者每頁顯示條數，帶着這些參數即可以繼續發送ajax請求後臺獲取數據。對於一些溢出狀況，layPage已經作了很好的封裝，好比，每頁顯示20條時當前正在最後一頁（5），當切換到每頁40條的時候，總共只有3頁了，那麼layPage會自動計算並切換到當前的最後一頁第3頁，無需咱們本身再去判斷處理。下面就是博主作好的分頁效果：jquery

　　一切，就是這麼簡單，就像初戀般的感受。。。ajax