(此代码拷贝可用)
前端与后端分页往往存在着数据 参数不对等的问题
例如 当前页 、每页的容量等等 使用插件做分页最开始需要做的是 使得这两个数据前后端一致
1、服务端代码
@RequestMapping("/ssRole")
public ModelAndViewselectRoelByContent(Pagepagepage,UserGroup role) {
ModelAndView mv = getModelAndView("authority_role/authority_role");
page =rolePageMethodService.getRoleByContent(page,role);
mv.addObject("lists",page);
mv.addObject("roleContent",role);
return mv;
}
注释
page内部包含的参数:size : 每页显示 数据条数 current : 当前页数
records : 查询出的数据(list) total: 数据总数
role 对象 通常是进行搜索时的条件
mapper.xml 进行全查 不用limit 函数 mybatis-plus 已经封装好
或者考虑搜索功能 可以进行加一些 if 语句
例如 :
and name LIKE CONCAT(CONCAT('%',#{name}),'%')
前端分页
var total = ${lists.total!};
layui.use(['laypage', 'layer'], function() {
var laypage =layui.laypage
, layer =layui.layer;
var form =layui.form;
var total = ${lists.total!};
//核心方法
laypage.render({
elem:'demo'
, count: total//data.length; 数据总数
, curr: ${lists.current!} //当前页
, limit: ${lists.size!} //每页数据条数
, limits: [5, 8, 10] //可选的每页数据条数
, layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
, jump:function (obj,first) {
if(!first){
curr = obj.curr;
var name =$("#roleNameSel").val();
window.location.href="${ctx}/rolePage/ssRole?current="+obj.curr
+"&size="+obj.limit+"&name="+name;
}
}
});
});