Layui如何监听表格分页组件每页显示条数（limit）的改变-Layui教程-PHP中文网

layui table 的 limit 下拉框切换不会触发 page 事件，需在 done 回调中用 settimeout 延迟监听 .layui-laypage-limits select 的 change 事件，并显式传入 newlimit 调用 table.reload() 重载。

layui如何监听表格分页组件每页显示条数（limit）的改变

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() 触发重载

示例代码片段：

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

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

下载

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 参数。

其他注意事项：