layui数据表格分页简单实现

首先要了解layui分页和 一般的后台分页不一样。
至少:我用的layui是基于前台分页的。

后台分页,都是根据前台传递了pageNum和limit这些分页参送给后台,后台根据参数进行了分页查询返回给前台。

但是layui不是这种。或者是我没找到那种方式,所以在百度上一通乱搜,始终不知道他是怎么传pageNum和limit过去的。

搜索到了一个parseData方法,说是在这里进行分页。
然后我试试了试,果然可以。

 table.render({
            elem: "#users",
            url: baseServer+'user/list',
            skin: 'line',
            page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                ,limit:10 //一页显示多少条
                ,limits:[5,10]//每页条数的选择项
                ,groups: 2 //只显示 2 个连续页码
                ,first: "首页" //不显示首页
                ,last: "尾页" //不显示尾页
            },
            parseData: function(res){ //将原始数据解析成 table 组件所规定的数据,res为从url中get到的数据
                var result;
                console.log(this);
                console.log(JSON.stringify(res));
                if(this.page.curr){
                    result = res.data.slice(this.limit*(this.page.curr-1),this.limit*this.page.curr);
                }
                else{
                    result=res.data.slice(0,this.limit);
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.total, //解析数据长度
                    "data": result //解析数据列表
                };
            },
            cols: [[{type:"checkbox"},
                {field: "id", title: "人员编号", minWidth:"100", sort: true},
                {field: "uname", title: "用户名", minWidth:"100", sort: true},
                {field: "pwd", title: "密码",edit: "text", minWidth:"100"},
                {field: "rank", title: "权限", minWidth:"100",templet:"#rankTpl", sort: true},
                {field: "status", title: "状态",  minWidth:"100",templet: '#statusTpl', sort: true},
                {field: 'right', title: '操作', toolbar: '#tool'}
            ]],
            done: function (res, curr, count) {
                table = res.data;
                // $('.layui-laypage-count').text("共"+res.data.length+" 条");
            }
        });

java后台:

    @RequestMapping("/user/list")
    @ResponseBody
    public Map<String,Object> userList(HttpSession session) {
        Map<String, Object> result = new HashMap<String, Object>();
        List<User> users = userServers.findUserAll();
        result.put("code", 0);
        result.put("msg", "测试");
        result.put("total", users.size());
        result.put("data", users.toArray());
        return result;
    }

就这样就可以分页了。分页是layui前端自己分页的,用的就是parseData函数。

哎,找了很久,按以前的逻辑,都是前台出发点击下一页按钮,然后提交对应的页码过去,然后后台根据页码返回数据。结果layui是给前台假分页。

如果哪位大哥有真正 的后台分页的layui的文章连接,希望给我贴一下。最好是基于java后台的。


版权声明:本文为Esc_Tab_End原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。