必须显式设置page: { limit: 15 }且limit为正整数,limits数组需为纯数字、长度≥2(如[5,10,20]),二者缺一不可;limit值须在limits中存在,否则ui自动回退到首项;后端参数名不匹配时须用request.limitname映射。

直接在 page 对象里写 limit 和 limits,别绕弯——limit 决定当前加载几条,limits 决定下拉能选哪些值,二者缺一不可。
怎么设默认每页显示条数(比如 15 条)
必须显式写 page: { limit: 15 },且 limit 是正整数。常见错误包括:
-
limit: "15"(字符串)→ Layui 当作无效,回退到默认 30 -
page: true或page: {}→limit不生效,始终用 30 - 把
limit写在顶层配置里(如{ limit: 15, url: '/api' })→ 被完全忽略
怎么改下拉选项(比如只显示 [5, 10, 20])
page.limits 数组才是唯一控制下拉菜单的配置,它和 limit 是两回事:
- 必须是纯数字数组,例如
[5, 10, 20];["5", "10"]或[5, null, 20]会被整个忽略,fallback 到默认[10, 20, 30, 40, 50] - 长度必须 ≥ 2 才渲染可展开下拉;
[10]会生成一个带箭头但点不开的假输入框 -
page.limit的值必须在limits数组中存在,否则 UI 自动 fallback 到第一个值(不报错) - 想彻底隐藏?只能设
limits: [],其他写法都不行
后端参数名不叫 limit 怎么办
如果后端接口接收的是 pageSize 而不是 limit,必须用 request 映射:
request: {
limitName: 'pageSize'
}
否则前端发 ?limit=20,后端收不到,数据永远不对——界面一切正常,但返回空或全量数据,最难排查。
动态改每页条数要不要销毁重绘
不需要。调用 table.reload() 即可:
table.reload('demo', {
page: { limit: 50 }
});
注意:table.destroy() + render() 是过度操作,会丢失当前页码、排序状态、已绑定事件;reload() 才是为此设计的。但要注意:动态改 limits 数组仍不支持,必须销毁重建——这是 Layui 的硬限制,不是写法问题。
最易被忽略的一点:改了 limits 后没同步更新 page.limit,导致用户切换选项时 UI fallback 到第一个值,而你完全不知道——检查 page.limit 是否在 limits 里,比检查 DOM 更重要。











