layui 表头全选默认只操作当前页已渲染的 dom 行,这是出于性能考虑的设计逻辑,并非 bug;服务端分页时无法跨页操作,前端分页时 table.cache 存全量但表头事件仍限于可见行。
默认就支持,无需额外代码——只要配置了 type: 'checkbox' 列,layui 会在表头自动生成全选复选框,点击即全选/反选当前页所有行。
为什么点表头只选当前页,不是全部数据
Layui 的设计逻辑就是只操作「当前页已渲染的 DOM 行」。它不关心你有没有搜索、过滤或分页,table.checkStatus() 返回的 data 字段永远只包含当前页里被勾选的那几条数据。这不是 bug,是性能取舍:避免把全量数据加载进内存做状态管理。
- 服务端分页(
url配置)时,浏览器根本不知道其他页有哪些数据,自然无法跨页操作 - 前端分页(
data直传数组)时,table.cache['your-id']虽然存了全部原始数据,但表头默认事件仍只触发现有 DOM 行 - 搜索过滤后,DOM 只显示匹配项,但
table.checkStatus()仍只读这些可见行,不会回溯到 cache 做二次筛选
如何确认当前页全选已生效
别依赖视觉判断,用 table.checkStatus('your-table-id') 拿真实状态:
- 返回对象中
data数组长度应等于当前页总行数(res.count或res.data.length) -
isAll字段为true表示当前页全部勾选 - 如果
data为空或长度不对,大概率是表格 ID 传错、或 DOM 尚未渲染完成(必须在done回调里调用)
常见失效场景和修复方式
表头全选点了没反应?多半卡在这几个点:
- 没启用 checkbox 列:
cols里漏写了{ type: 'checkbox' },或者写在了非首列(Layui 要求必须第一列) - 绑定时机太早:在
table.render()外部直接写$('thead input[lay-type="all"]').on(...),DOM 还没生成,事件绑不上 - 用了自定义 HTML 复选框:在
templet里手写<input type="checkbox">,Layui 完全不接管,状态无法同步 - form 没初始化:
layui.use(['table', 'form'])缺了form模块,伪复选框样式不渲染,点击无效
真正需要“全选当前搜索结果”或“排除禁用行”的,得手动接管表头事件——但纯当前页全选,Layui 已经做得足够稳,别画蛇添足。











