layui数据表格分页简单实现

今天药忘吃喽~ 2022-12-19 13:08 156阅读 0赞

首先要了解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后台的。