Layui表格分页心得

很多小伙伴们在使用layui的时候，发现它的表格渲染实现很简单，只需要给个接口，在后台拿数据并且使用规定的格式返回数据就行了，具体返回的json格式如下(用的是Java代码)

    private int code;//状态码
    private String msg;//信息
    private Object data;//返回的数据
    private String count;//数据条数

但是我们渲染表格数据完成之后，往往需要分页，这个时候很多小伙伴们在查看官方文档的时候，会有点看不明白，甚至大多数都是这个问题：

我草？我明明给了每页显示条数跟下拉列表参数啊，为什么他还是只显示全部的数据呢？具体代码可能是这样的：

 table.render({
            elem: '#currentTableId',
            url: "${pageContext.request.contextPath}/admin?method=selectAllUser",
            toolbar: '#toolbarDemo',
            limits: [10, 20, 40, 55, 70, 85],
            limit: 10,
            page: {
                theme: '#1E9FFF',
                curr: 1,
            },
            skin: 'line',
            method: 'post',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                {type: "checkbox", width: 50},
                {field: 'userId', width: 320, title: 'ID', sort: true},
                {field: 'userName', width: 160, title: '用户昵称'},
                {field: 'realName', width: 160, title: '用户真实姓名'},
                {field: 'sex', width: 80, title: '性别'},
                {field: 'address', width: 80, title: '地址', width: 100},
                {field: 'phone', title: '电话号', width: 150},
                {field: 'role', width: 100, title: '角色', sort: true},
                {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
            ]],

这个时候大家就在网上找来找去了，我也同样遇到了这个坑，不过自己也是总结出来使用的方法了

首先，一定要确定layui的json返回格式是官网上规定的，跟我这样写就行了

第二，要将参数page设置为true，代表开启分页，但是这个参数很明显 是一个bool类型的参数，官网上写的很清楚，它是可以设置为object类型的，那么我们就可以自定义其中的属性，从而达到自定义样式以及相关操作了

page

Boolean/Object

开启分页（默认：false）。支持传入一个对象，里面可包含 laypage 组件所有支持的参数（jump、elem除外）

 第三，就是上面提到的大多数的问题

我们在后台写数据接口的时候，其实就是一个select * from table_name 拿到的是所有数据，我们只需要在前端进行分页显示就行了，我的解决办法就是直接在后台拿到所有的数据，然后再前端进行数据截取就行了

首先确保自己的放回json是标准layui所支持的类型，这个很关键

        然后再进行表格渲染的时候，将page参数设置为object类型，具体参考如上图

其中将curr(当前页码)设置为1，因为如果不设置的话默认就是undetifiled，会写很多重复代码

然后最关键的点来了：

        官网上给出了一个表格参数叫

parseData:function(data){
}

        它可以拿到我们的返回json数据，所以说到这里就差不多明白了

我们可以定义一个变量进行数据data的返回，比如我们定义一个result，用来返回数据

            parseData: function (res) {
                //这个page参数，开启分页后，它的值是true的，它是一个bool类型
                //当点击了分页工具的操作的时候，它就是一个对象了
                /*包含以下信息，里面的curr就代表当前页码数，我们可以根据这个来自定义返回的数据是什么
                //可以在page上面定义这些json值，这样好操作
                *
                * {elem: 'layui-table-page1', count: 13, limit: 10, limits: Array(6), groups: 3, …}
                        count: 13
                        curr: 2
                        elem: "layui-table-page1"
                        groups: 3
                        index: 1
                        jump: ƒ (e,t)
                        layout: (6) ['prev', 'page', 'next', 'skip', 'count', 'limit']
                        limit: 10
                        limits: (6) [10, 20, 40, 55, 70, 85]
                        pages: 2
                *
                * */
                console.log(this.page.curr);
                console.log(this.limit);
                var result;
                // if (this.page.curr) {
                //（10（2-1），10*2）也就是10,20
                result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                // } else {
                //一开始就是0-10，点击第二页的时候，curr就是2，limit还是自己定义的10，想达到分页就只需要对查询出来的数据进行划分
                //对于result进行赋值，每次的值根据需要进行截取
                // result = res.data.slice(0, this.limit);
                // }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": result //解析数据列表
                };

然后再其中用上刚刚所提到的截取操作，根据curr(当前页码)，和limit(每页显示的数据量)进行result赋值。

        比如我这里limit是10 curr起始是1 那么result就是json数据返回中data的值截取0-10之间的值，这样我们就拿到了0-10的数据，从而达到第一页面显示10条数据，当我们点击第二页的时候，curr就是2，第二页的数据就是10-20，以此类推，即可满足自己的需要啦