layui表格分页limit必须配置在page对象内为正整数，如page: { limit: 20 }；limits数组定义可选项且长度≥2；后端参数名不匹配需通过request和response映射。

直接在 table.render() 的 page 配置对象里设 limit，不是写在顶层、也不是靠 CSS 或 DOM 操作，更不是改 limits 数组就能生效。

page.limit 必须放在 page 对象内部，且是正整数

很多人写了 limit: 20 却没生效，是因为把它和 elem、url 并列写了，Layui 完全忽略——它只认 page: { limit: 20 } 这种结构。

• limit 必须是数字类型，"20" 或 null 都会静默 fallback 到默认 30
• 如果 page: true，limit 就不会被读取，必须显式写成 page: { limit: 20 }
• 首次渲染时才读取这个值，翻页后自动沿用，除非你主动 table.reload()
• 服务端接口也得按这个值做分页计算，比如 (curr - 1) * limit 算 offset

limits 数组控制下拉菜单选项，不是 limit

limits 和 limit 是两回事：limit 决定“当前用多少”，limits 决定“能选哪些”。只配 limits 不配 limit，表格照样按默认 30 条加载。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

• limits 必须是纯数字数组，如 [5, 10, 20, 50]；["10", "20"] 或 [10, null, 50] 全部无效
• 长度必须 ≥ 2 才渲染可展开下拉；[10] 会出一个点不开的假输入框；[] 才真正隐藏
• limit 值必须在 limits 数组中存在，否则 UI 自动选中第一个（比如 limits: [10, 50] 却写 limit: 20，实际生效的是 10）
• 移动端建议不超过 4 个选项，太多会弹层溢出视口，用户点不到最末项

动态改每页条数必须用 table.reload()，不能只改变量

用户点了“每页 50 条”按钮，你改了 pageSize = 50，但表格没反应？因为 Layui 不监听变量变化，必须触发重载。

• 调用 table.reload('yourTableId', { page: { limit: 50 } })，其中 'yourTableId' 是 render() 时传的 id 或容器的 lay-id
• 不传 id 就只能全局重载，可能影响其他表格
• reload 默认保持当前页码；如需回到第一页，额外加 page: { curr: 1, limit: 50 }
• 别用 table.destroy() + render() 替代 reload——会丢当前页码、排序状态、toolbar 绑定事件

后端参数名不匹配会导致数据为空，但 UI 看不出异常

前端显示“50 条/页”，请求发出去却是 ?page=1&limit=50，而后端只认 pageSize，结果返回空数据或全量数据。这种错最难排查，因为分页栏一切正常。

• 检查 Network 面板里实际请求 URL 的参数名是不是你预期的
• 后端接口字段名不是 limit 时，必须同步配 request: { limitName: 'pageSize' }
• 同理，如果后端总条数字段叫 total 而不是 count，得加 response: { countName: 'total' }
• 漏掉 request 映射，limits 和 limit 配得再对也没用

真正容易被绕晕的点在于：limits 控制「能选什么」，limit 控制「当前选哪个」，request.limitName 控制「后端能不能收到」——三者缺一，UI 和接口就对不上，而错误往往静默发生，连控制台都不报。