html

<div class="layui-card-body">
    <table id="layuiTable" lay-filter="layuiTable"></table>
    <div id="loadLayPage"></div>
</div>

 

js

layui.define(["table", 'layer', 'laypage'], function (e) {
    /**引入组件*/
    let table = layui.table
        , layer = layui.layer
        , layPage = layui.laypage
        , queryParam = {};


    /**加载表格 ...*/
    table.render({
        id: 'layuiTable',
        elem: '#layuiTable',
        // 表格样式
        height: "full-190",
        skin: 'line',
        // 请求和响应参数
        url: '/system/users',
        where: queryParam,
        text: "无数据显示",
        cols: [[
            {type: 'checkbox'},
            {field: "userCode", title: "用户编号", hide: true},
            {field: "username", title: "用户名", cellMinWidth: 235},
            {field: "name", title: "姓名", width: 85},
            {field: "mailAddress", title: "邮箱地址", width: 160},
            {field: "status", title: "状态", width: 70},
            {field: "lastLoginIp", title: "最后登录IP", width: 130},
            {field: "lastLoginTime", title: "最后登录时间", width: 150},
            {field: "updatedTime", title: "修改时间", width: 150}
        ]],
        done: function (res, curr, count) {
            // 加载分页 ...
            loadLayPage(res.count, res.data);
			// 设置滚动条位置
			setTableScroll(this.elem.next('.layui-table-view'), this.scroll)
        }
    });

    function loadLayPage(count, limit) {
        layPage.render({
            elem: 'loadLayPage'
            , count: count
            , curr: queryParam.page || 1
            , limit: queryParam.limit || 10
            , limits: [10, 20, 30]
            , layout: ['count', 'limit', 'prev', 'page', 'next', 'skip']
            , jump: function (obj, first) {
                queryParam.page = obj.curr;
                queryParam.limit = obj.limit;
                if (!first) {
                    reloadTable({
                        where: queryParam
                    });
                }
            }
        });
    }

    /**重新加载表格数据*/
    function reloadTable(option = {}) {
		option.scroll = getTableScroll($('#layuiTable').next('.layui-table-view'));
        table.reload("layuiTable", option);
    }

    //获取滚动条
    function getTableScroll(tbView) {
        //var scrollTop = tbView.find('.layui-table-body').scrollTop();
        var scrollTop = 0;
        var scrollLeft = tbView.find('.layui-table-body').scrollLeft();
        return {
            scrollTop: scrollTop, scrollLeft: scrollLeft
        }
    }

    //设置滚动条
    function setTableScroll(tbView, scroll = {scrollTop: 0, scrollLeft: 0}) {
        tbView.find('.layui-table-body').scrollTop(scroll.scrollTop);
        tbView.find('.layui-table-body').scrollLeft(scroll.scrollLeft);
        table.resize('layuiTable'); //重置表格尺寸
    }

});