Layui分页需严格区分前端/后端模式:传data即前端分页,page必须为对象且count为全量数据长度;配url则必须删data,request映射参数名并确保响应count在顶层、code为0。

page 配置必须是对象,不能写 page: true
只要你在 table.render() 里传了 data 数组(哪怕空数组),Layui 就自动切到前端分页模式,此时 page: true 完全无效——分页栏压根不渲染。你看到的“没分页”或“只显示数据没控件”,八成是这个原因。
正确写法是显式传一个对象:
page: { limit: 10, limits: [10, 20, 50], curr: 1, count: allData.length }-
count必须是数字,且等于全量数据长度;留空、undefined或写错字段名(比如total)都会导致分页栏消失 - 如果用的是后端分页(即配了
url),data字段必须彻底删掉,否则url被忽略
limit 和 limits 要一起设,否则首次加载不生效
Layui 默认每页 30 条,limits 只控制下拉选项,不改变初始值。只写 limits: [10, 20, 50],表格第一次还是按 30 条渲染。
- 必须同时指定
limit: 10,才表示“默认就加载 10 条” - 改 limit 时别只调
table.reload('id', {}),得带完整page配置:table.reload('id', { page: { limit: 50 } }) - 移动端建议
limits不超过 4 项,太多会弹层溢出视口,用户点不到
后端分页时 request 映射必须对齐接口参数名
默认请求发的是 ?page=1&limit=10,但 Spring Boot 常收 pageNum/pageSize,ThinkPHP 收 page/list_rows。参数名不匹配,后端根本收不到分页参数,只能返回全量数据。
- 查 Network 面板确认实际 URL 参数,这是最准的验证方式
- 映射写法:
request: { pageName: 'pageNum', limitName: 'pageSize' } - 响应体里
count字段必须在顶层,不能塞进data里;且code必须为0,否则分页栏不显示
前端分页改 limit 或搜索后,curr 得手动重置
前端分页本质是你自己切数组、自己算页、自己重画。Layui 不会自动校准页码逻辑。
- 用户把每页条数从 10 改成 50,当前
curr是第 8 页 → 实际可能只剩 2 页,不重置curr就会显示空白 - 搜索过滤后新数组长度变小,
table.render()时必须传page: { curr: 1, count: newArr.length } - 监听
limit事件时,要主动判断:if (obj.curr > Math.ceil(obj.count / obj.limit)) { obj.curr = 1 }
data 存在与否直接决定整个分页链路走向,这点容易被忽略。


















