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请求
        }
    });
}