首先要了解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版权协议,转载请附上原文出处链接和本声明。