pc端分頁插件的使用

使用的插件是jqpaginator分頁插件

官網：http://jqpaginator.keenwon.com/

使用方法：

第一步引入css.js

<link type="text/css" rel="stylesheet" href="http://cdn.staticfile.org/twitter-bootstrap/3.1.1/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="js/jqpaginator.min.js" type="text/javascript" charset="utf-8"></script>

第二步：html布局

        <table class="layui-table" style="text-align: center;">
            <thead>
                <tr>
                    <th style="text-align: center;">ID</th>
                    <th style="text-align: center;">商品名稱</th>
                    <th style="text-align: center;">商品價格</th>
                    <th style="text-align: center;">創建時間</th>
                    <th style="text-align: center;">狀態</th>
                    <th style="text-align: center;">操作</th>
                </tr>
            </thead>
            <tbody id="tbody">
            </tbody>
        </table>
        <div id="pagination" style="text-align: center;">
        </div>

第三步：定義分頁 ajax請求

 

var pageCount; // 總頁數
var dataObj = { // 定義一個data傳輸的對象
    "page": 1, // 初始化第一頁
    "rows": 10 // 每頁記錄數
}

$(function() {
    loadcancel();
    loadpage();
});
/**
 * 定義總頁數（可以設置為全局方法）
 * @param {Object} 總數量
 * @param {Object} 每頁數量
 */
function fPageCount(sum, count) {
    return(sum % count == 0) ? sum / count : Math.ceil(sum / count);
}
/**、
 * 初始化查詢第一頁的數據
 * @param {Object} 當前頁數
 * @param {Object} data數據
 */
function loadcancel(obj) {
    $.ajax({
        type: "post",
        url: "url",
        async: false,
        cache: false,
        data: dataObj,
        dataType: "json",
        success: function(data) {
            /**
             * data中至少存在兩個屬性
             * sum：總數量
             * list：每頁查詢的數據
             */
            $('#tbody').empty(); // 清空tbody對象
            var html = '';
 40　　　　　　　var c = fPageCount(data.sum, rows);
　　　　　　　　 // 為什么還要二次轉換，因為如果總頁數為0的話，分頁插件會報錯，所以當總頁數為0的時候設置總頁數為1
　　　　　　　　　pageCount = (c == 0)? 1 : c;

            if(data.sum > 0) {
                $.each(data.list, function(index, item) {
                    // jquery 遍歷對象
                    html += '<tr><td>' + item['id'] + '</td>...</tr>';
                });
            } else {
                html += '<tr><td style="text-align: center;" colspan="8">暫時沒有數據</td></tr>';
            }
            $('#tbody').html(html);
        },
    });
}

//分頁方法
function loadpage() {
    $.jqPaginator('#pagination', {
        totalPages: pageCount, // 設置分頁的總頁數
        visiblePages: 10, //     設置最多顯示的頁碼數
        currentPage: dataObj.page, // 設置當前的頁碼
        wrapper: '<ul class="pagination"></ul>',
        first: '<li class="first"><a href="javascript:void(0);">首頁</a></li>',
        prev: '<li class="prev"><a href="javascript:void(0);">上一頁</a></li>',
        next: '<li class="next"><a href="javascript:void(0);">下一頁</a></li>',
        last: '<li class="last"><a href="javascript:void(0);">末頁</a></li>',
        page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
        onPageChange: function(num) {
            dataObj.page = num; // 點擊分頁時更換page的值
            loadcancel(); // 重新執行ajax請求
        }
    });
}