一個比較好用的分頁控制元件

weixin_33866037發表於2018-01-18
控制元件

官方地址：http://pagination.js.org/index.html
最近在做一個PC端的資料管理系統，分頁的需求是必不可少的，而後端的要求是除了把分頁的樣式和結構寫出來，還必須要把JS的互動也寫出來，後端只寫請求資料的那部分程式碼，我嘗試了好幾個分頁的控制元件，最終覺得這個最好用，下面是我在專案中的程式碼，分享出來給大家看一下。
另外，這個專案是用bootstrap做的，所以你會看到我引入了bootstrap.css，同時，在結構上也使了一些bootstrap的程式碼，如果你只是單純的想用這個的控制元件，可以完全不必理會跟bootstrap.css有關的這部分內容。
HTML程式碼

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta content="text/html" charset="utf-8" http-equiv="Content-Type">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit"/>
    <title>一個比較好用的分頁控制元件</title>
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/main.css">
    <link rel="stylesheet" href="assets/css/pagination.css">
    <!--[if lt IE 9]>
        <script src="assets/js/html5shiv.min.js"></script>
        <script src="assets/js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="main-content">
    <!-- 帶頁碼的表格 -->
    <div class="system-table">
        <table class="data-table2 table table-hover">
            <thead>
            <tr>
                <th>標題</th>
                <th>文章總點選</th>
                <th>文章端內點選</th>
                <th>文章PC站點選</th>
                <th>分享文章h5點選</th>
                <th>分享文章次數</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td><i class="article-title-id">1,</i><a href="#">22歲接班，富李兆會…</a></td>
                <td>23</td>
                <td>23</td>
                <td>5</td>
                <td>23</td>
                <td>23</td>
            </tr>
            ... 被省略的程式碼
            </tbody>
        </table>
        <div class="table-footer">
            <div class="pull-right">
                <div id="systemPager"></div>
            </div>
            <p>每頁顯示 <input type="text" class="page-count" value="7">條</p>
        </div>
    </div>
</div>
<script src="assets/js/jquery-3.2.1.min.js"></script>
<script src="assets/js/pagination.js"></script>

下面是JS程式碼：

<script type="text/javascript">
    /* 分頁的事件 */
    $(function () {
        (function () {
            var container = $('#systemPager');

            var sources = function () {
                var result = [];

                for (var i = 1; i < 196; i++) {
                    result.push(i);
                }
                return result;
            }();

            var options = {
                dataSource: sources,  // 資料來源，最終提供給分頁元件的是一個陣列
                // 如果是ajax請求就用下面這段：
                /*
                dataSource: function(done) {
                    $.ajax({
                        type: 'GET',
                        url: '/test.json',
                        success: function(response) {
                            done(response);
                        }
                    });
                },*/

                locator: function () {   // 這個引數與 dataSource 相關，一般情況下，dataSource 是一個陣列，可以直接傳給分頁元件處理。但如果返回的是 Object，那麼就需要指定那個陣列，預設為 data
                    // find data and return
                    return 'a.b';
                },
                // dataSource: '填寫介面',
                // locator: '指定資料來源中的哪個陣列',


                pageSize: 4,     // 預設顯示幾個頁碼，每頁的條目數
                pageNumber: 1,  // 預設在第幾頁，初始化時載入哪一頁的資料
                pageRange: 2,  //可見的頁碼範圍，即當前頁碼兩邊的頁碼數量。比如當前是第 6 頁，設定 pageRange 為 2，則頁碼條顯示為 '1... 4 5 6 7 8'
                showNavigator: true,  // 顯示總頁碼數和當前第幾頁
                showGoInput: true,   // 顯示跳轉到第多少頁
                showGoButton: true,  // 顯示點選跳轉的按鈕
                // activeClassName: 'systemPagerActive',
                prevText: ' 上一頁 ',
                nextText: ' 下一頁 ',
                goButtonText: 'go',
                formatGoInput: '跳轉到第 <%= input %> 頁',
                className: 'paginationjs-theme-red paginationjs-small',

                //callback 每次翻頁時的回撥
                callback: function (response, pagination) {
                    //  資料成功獲取之後馬上觸發
                    console.log(111);
                    window.console && console.log(response, pagination);

                    var dataHtml = '<ul>';

                    $.each(response, function (index, item) {
                        dataHtml += '<li>' + item + '</li>';
                    });

                    dataHtml += '</ul>';

                    container.prev().html(dataHtml);
                }
            };

            //$.pagination(container, options);

            container.addHook('beforeInit', function () {
                // 初始化的時候觸發
                window.console && console.log('beforeInit...');
            });

            // 將配製轉給分頁容器
            container.pagination(options);

            container.addHook('beforePageOnClick', function () {
                // 點選頁碼之前呼叫
                window.console && console.log('beforePageOnClick...');
                //return false
            });
            container.addHook('beforeRender', function () {
                // 每次分頁時會重新渲染分頁條，渲染之前呼叫
                console.log("渲染之前觸發");
            });
            container.addHook('beforePreviousOnClick', function () {
                console.log('點選上一頁之前呼叫');
            });
            container.addHook('beforeNextOnClick', function () {
                console.log('點選下一頁之前呼叫');
            });
            container.addHook('beforeGoButtonOnClick', function () {
                console.log('分頁跳轉按鈕點選之前呼叫');
            });
        })();
    });
</script>

以上是我根據官網的文件寫出的程式碼，後端可以直接能用。
pagination.css、pagination.js檔案是從官網下載的，您需要的時候可以直接去下載。
在pagination.css你可以根據自己的需要修改樣式，而且這個控制元件本身也提供了幾套不同的色調供選擇，如果你喜歡的話，可以直接使用。

相關文章