layui table 的 limit 下拉框切换不会触发 page 事件，需在 done 回调中用 setTimeout 延迟监听 .layui-laypage-limits select 的 change 事件，并显式传入 newLimit 调用 table.reload() 重载。
layui table 的 limit 改变事件没有原生回调
layui 的 table.render() 渲染表格后，分页器上的「每页条数」下拉框（limit）切换时，page 事件**不会触发**——这是最容易踩的坑。很多人误以为改 limit 就会进 page 回调，结果发现完全没响应。
根本原因是：layui 把 limit 变更视为「配置变更」而非「翻页动作」，它只在用户点击页码或调用 table.reload() 时才触发 page；而直接点下拉选 10/20/50，只是更新了内部 options.limit，不主动重载数据。
所以，必须手动监听下拉框的 DOM 变化。
监听 .layui-laypage-limits select 元素的 change 事件
分页器中每页条数的下拉框是动态生成的，class 为 layui-laypage-limits，里面有个 select。你需要在表格渲染完成后再绑定事件，且注意：该 DOM 可能尚未存在，需用事件委托或延迟等待。
推荐做法（兼容性好、无竞态）：
- 在
table.render()的done回调里，用setTimeout延迟 0ms 确保分页 DOM 已挂载 - 用
$(document).on('change', '.layui-laypage-limits select', ...)避免重复绑定 - 从
select的value获取新 limit，再调用table.reload()触发重载
示例代码片段：
table.render({
elem: '#demo',
url: '/api/list',
page: true,
limit: 10,
done: function(res, curr, count) {
// 确保分页 DOM 渲染完成
setTimeout(() => {
$(document).off('change', '.layui-laypage-limits select')
.on('change', '.layui-laypage-limits select', function() {
const newLimit = parseInt(this.value);
table.reload('demo', {
page: { curr: 1 }, // 重置到第 1 页
limit: newLimit
});
});
}, 0);
}
});
reload 时必须显式传入 limit，不能依赖当前实例状态
很多人写 table.reload('demo', { page: { curr: 1 } })，以为 layui 会自动记住刚选的 limit，但实际不会——reload 默认沿用初始化时的 limit（比如初始设为 10，哪怕下拉框已改成 20，不传 limit 仍按 10 请求）。
所以每次监听到 change 后，必须把 newLimit 显式传给 reload 的 limit 参数。
其他注意事项：
- 如果用了服务端分页，确保后端接口能正确接收并响应
limit和page参数 - 若表格启用了
autoSort: true，limit 改变后排序状态可能丢失，必要时在done中恢复 - 避免在
done外多次绑定同一事件，否则会重复触发 reload
使用 laypage 替代方案？不推荐
有人想绕过 table 自带分页，改用独立 laypage + 手动控制 limit 和 page，但这会丢掉 table 的自动适配、loading 状态、数据映射等能力，反而增加维护成本。
真正需要定制分页交互的场景（比如 limit 不可变、或需联动筛选），应该用 table.reload() 主动控制，而不是弃用内置分页。
核心就一条：layui table 的 limit 下拉框本身不触发任何 JS 回调，所有逻辑都得靠监听 DOM + 主动 reload。漏掉 limit 参数或没做事件解绑，是线上最常见的两个失效原因。
