必须统一layui与后端分页参数名及返回字段:前端用page/limit,后端接收对应参数并转为pagehelper.startpage(page,limit)或mybatis-plus的new page(page,limit),返回json中必须含count和data字段,且table.render需显式配置request和response映射。

直接用 PageHelper 或 MyBatis-Plus 的 Page 配合 layui 的 table.render 就能跑通,但必须对齐「页码起始值」和「参数名」,否则总页数、当前页全错——这是最常卡住的地方。
layui 的 page 参数名必须和后端接收字段一致
layui 默认把分页参数叫 page 和 limit(不是 pageNum/pageSize),而 PageHelper 常见写法是按 pageNum 和 pageSize 解析。不统一就会查出第 1 页数据,但前端显示第 2 页的记录。
- 前端保持默认:layui 不改
page/limit,就别在where里手动塞pageNum - 后端 Controller 接收时,用对应名字:
@RequestParam("page") Integer page和@RequestParam("limit") Integer limit - PageHelper 启动分页时,要转成它认的格式:
PageHelper.startPage(page, limit)—— 它内部会自动映射为pageNum/pageSize,不用额外转换 - 如果用了 MyBatis-Plus,
new Page(page, limit)是安全的,它的构造器原生支持 layui 的命名习惯
后端返回结构必须含 total 和 data 字段
layui 的 table.render 只认 count(总条数)和 data(当前页数据)两个 key,其他字段如 total、records、list 都会被忽略。
- PageHelper 查询后,用
PageInfo提取:PageInfo<t> pageInfo = new PageInfo(list); return R.ok().put("count", pageInfo.getTotal()).put("data", pageInfo.getList());</t> - MyBatis-Plus 更省事:
IPage<t> page = new Page(page, limit); service.page(page, wrapper); return R.ok().put("count", page.getTotal()).put("data", page.getRecords());</t> - 千万别返回
page对象本身——里面字段名不匹配,layui 解析失败后表格空白,控制台也无报错
前端 table.render 必须开启 request 和 response 映射
layui 默认的 request 和 response 字段名跟主流分页插件不一致,不显式配置就会拿不到总数或分页跳转失效。
-
request: { pageName: 'page', limitName: 'limit' }—— 确保请求 URL 带?page=1&limit=10 -
response: { countName: 'count', dataName: 'data' }—— 和后端返回 JSON 的 key 完全对应 - 漏配
response是隐形坑:表格能加载数据,但分页栏显示“0 条”,点击页码没反应,查 network 发现返回了total却被忽略 - 示例片段:
table.render({<br> elem: '#test',<br> url: '/user/list',<br> request: { pageName: 'page', limitName: 'limit' },<br> response: { countName: 'count', dataName: 'data' },<br> cols: [[{field:'id', title:'ID'}]],<br> page: true<br>});
真正容易被忽略的是:layui 分页依赖服务端每次返回真实 count,而不是靠前端算出来的页数。如果后端漏了 count 或字段名拼错,分页栏就变成摆设——看起来在动,其实点哪都只刷第一页。











