layui表格配合自定义分页组件的使用

最近的项目中使用了layui组件，整体用起来还是不错的，这里记录一下表格组件配合分页组件的使用。layui的表格组件还是挺好用的，有自带的分页功能，在数据量小的情况下还是够用的，但是数据量稍微多一点就会显得很卡。所以还是得做分页查询，下面就讲一下使用步骤。

1. layui的分页组件没办法主动刷新总数，但是总数在操作的时候很可能会是动态的，这里需要先定义一个函数，每次都会重新渲染分页组件所以可以刷新总数

function flushPage(num, curr, limit) {
    layui.use(['laypage', 'form', 'layer', 'table'], function () {
        var form = layui.form;
        var table = layui.table;
        laypage = layui.laypage
            , layer = layui.layer;
        laypage.render({
            elem: 'demo-laypage-all'	//渲染的对象
            , count: num		//注意这里的count是数据条数
            , limit: limit//分页数
            , limits: [10, 25, 50, 100]		//每页显示8条数据
            , layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'] // 功能布局
            , curr: curr	//当前高亮页
            , jump: function (obj, first) { //obj为当前页的属性和方法，第一次加载first为true
                //do SomeThing
                if (!first) {	//非首次加载
                    // console.log(obj.curr);
                    var data = form.val('operationLog-filter');
                    operationLogqueryObj.pageNum = obj.curr
                    operationLogqueryObj.pageSize = obj.limit
                    operationLogqueryObj.beginTime = data.beginTime
                    operationLogqueryObj.endTime = data.endTime
                    operationLogqueryObj.businessType = data.businessType
                    let res = api_logManagement_operateList(operationLogqueryObj)
                    if (res.code == 200) {
                        OperationLogData = res.rows
                        layui.table.reload('ID-table', {
                            data: OperationLogData,
                        })
                        flushPage(res.total, obj.curr, obj.limit)
                    }
                }
            }
        });
    });
}

flushPage(num, curr, limit)num是数据总条数，curr是当前页，limit是当前页数据条数，operationLogqueryObj是定义在外面的对象用于筛选条件
2. 定义好后直接在代码里调用即可，我这里是默认第一次加载每页分10条数据

flushPage(res.total, 1, 10)

3. 还有分页组件的使用还没说，这里在加载表格时将自带的分页page设置为fasle禁用掉

table.render({
            height: 600,
            elem: '#ID-table'
            , cols: [[ //标题栏
                { field: 'title', title: '系统模块' },
                { field: 'operName', title: '操作人员', },
                {
                    field: 'businessType', title: '操作类型', templet: function (d) {
                        return `<span>${d.businessType == 0 ? '其它' : ""}</span>
                        <span>${d.businessType == 1 ? '新增' : ""}</span>
                        <span>${d.businessType == 2 ? '修改' : ""}</span>
                        <span>${d.businessType == 3 ? '删除' : ""}</span>
                        <span>${d.businessType == 4 ? '授权' : ""}</span>
                        <span>${d.businessType == 5 ? '导出' : ""}</span>
                        <span>${d.businessType == 6 ? '导入' : ""}</span>
                        <span>${d.businessType == 7 ? '强退' : ""}</span>
                        <span>${d.businessType == 8 ? '生成代码' : ""}</span>
                        <span>${d.businessType == 9 ? '清空数据' : ""}</span>`;
                    }
                },
                { field: 'operIp', title: 'IP地址' },
                {
                    field: 'status', title: '操作状态', sort: true, templet: function (d) {
                        return `<span>${d.status == "0" ? "正常" : "异常"}</span>`;
                    }
                }
                , { field: 'operTime', title: '操作时间', sort: true, }
            ]]
            , toolbar: '#toolbarDemo'
            , data: OperationLogData
            , even: false
            , page: false // 是否显示分页
            , limits: [10, 25, 50, 100]
            , limit: 10 // 每页默认显示的数量
            , pagebar: '#ID-table-demo-page-pagebar',
        });

4. 在表格底下定义自定义分页组件

<script type="text/html" id="ID-table-demo-page-pagebar">
                        <div id="demo-laypage-all"></div>
 </script>

5. 表格加载时将pagebar设置为’#ID-table-demo-page-pagebar’就可以了，不过这样分页组件会默认靠右，我们可以稍微调整一下这样就可以靠左了

.layui-table-pagebar {
    float: left;
}