layui table分页失效的首要原因是同时配置data和url导致强制本地分页,必须删除data字段、仅保留url并设page:true;其次需显式配置request映射后端分页参数名(如pagename:'pagenum'、limitname:'pagesize'),且响应必须含数字型count字段与code:0。

table.render() 里不能同时写 data 和 url
只要写了 data: [](哪怕空数组),Layui 就会强制走本地分页,url 直接被忽略,页码切换时 Network 面板完全不发请求。这是最常踩的坑,也是分页“失效”的首要原因。
正确做法:删掉所有 data 字段,只保留 url,并确保 page: true 开启分页。
- 错误写法:
data: [], url: '/api/list'→ 静默降级为客户端分页 - 正确写法:
url: '/api/list', page: true - 验证方式:点下一页,打开浏览器 Network 面板,看是否发出新请求、参数是否带上了
page和limit
request 配置必须匹配后端实际接收的参数名
Layui 默认用 page 和 limit,但 Spring Boot、ThinkPHP、Flask 等主流后端几乎都用 pageNum/pageSize 或 page_no/per_page。不改 request,后端永远收不到分页参数,只能返回全量数据。
必须显式配置:
request: {
pageName: 'pageNum',
limitName: 'pageSize'
}
- 大小写敏感:
pageNum≠pagenum,后端 Controller 参数名必须完全一致 - Spring Data 的
Pageable、MyBatis-Plus 的IPage默认都不认page/limit - 如果后端用的是
page_no=1&per_page=20,那就配pageName: 'page_no', limitName: 'per_page'
搜索时必须重置 page.curr,否则页码残留
用户在第 5 页点击搜索,如果不手动重置,table.reload() 仍会带着 page=5 请求,导致后端查第 5 页的搜索结果——大概率为空。
搜索提交时要这样写:
table.reload('demo', {
where: { keyword: data.field.keyword },
page: { curr: 1 }
});
-
page: { curr: 1 }是关键,它让表格跳回第 1 页并重新加载 - 不要只传
where,漏掉page就等于没重置 - 如果用了自定义
pageName(如pageNum),page: { curr: 1 }依然有效,Layui 会自动映射成对应参数名
后端响应必须含 count 字段且 code === 0
缺 count 或 <code>code 不为 0,Layui 表格能渲染数据,但分页栏直接消失——连“第 1 页 / 共 0 页”都不显示。
标准响应结构必须是:
{
"code": 0,
"msg": "",
"count": 1250,
"data": []
}
-
count必须是数字类型,不能是字符串"1250",也不能嵌套在data里 - 常见翻车点:
count写成total、totalCount、data.count - 调试建议:在
done回调里console.log(res),确认res.count存在且 > 0











