layui table.getdata()默认返回原始全量数据而非筛选后结果;正确获取筛选后行数应监听search事件并读取table.cache['id'].length。

layui table 的 getData 默认返回全部原始数据,不是筛选后结果
很多人调用 table.getData('id') 后发现行数没变,以为 API 失效了——其实它从来就不返回筛选/分页后的子集。Layui 的设计里,getData 只负责拿初始化时传入的原始 data 数组或异步加载完缓存的全量数据,过滤、搜索、排序这些操作都是纯前端渲染层逻辑,不改变源数据。
所以直接靠 getData 数长度,永远等于你最初给它的总条数(除非你手动改了源数组)。
正确获取筛选后可见行数:用 getSelectRow + cache 或监听 search 事件
筛选后实际展示的行,其 DOM 元素已重排,但 Layui 并未暴露“当前页可见数据”这个数组。可靠方式是结合表格实例的 cache 属性和当前页码/每页条数做推算,或者更稳妥地:在触发筛选(包括搜索、列筛选、重载)后,从 table.cache 中提取匹配项。
- 如果启用了前端分页(
page: true且url未设),筛选后实际生效的数据存在table.cache['id']中,它是经过 filter、sort、limit 后的当前页数据数组 - 若为后端分页(
page: true且有url),筛选逻辑由服务端完成,cache里只有当前页数据,但总行数需依赖服务端返回的count - 最通用的做法:监听
table.on('search(id)'),在回调里取table.cache['id'].length—— 这个值就是当前筛选+分页后渲染出的行数
示例:
table.on('search(test)', function(obj){
var filteredCount = table.cache['test'] ? table.cache['test'].length : 0;
console.log('当前筛选后显示行数:', filteredCount);
});
注意 reload 后 cache 不会自动更新,要等渲染完成
如果你手动调用 table.reload('id', {...}) 并带了 where 参数做条件筛选,cache 不会在 reload 调用后立刻就绪——它只在表格重绘完成(即 done 回调执行时)才更新。
- 不要在
reload后立即读table.cache['id'],可能还是旧值 - 必须放在
done回调里取:done: function(res, curr, count){ console.log('当前页数据行数:', res.data.length); } - 如果需要总筛选结果数(非仅当前页),且是后端分页,则
count参数就是服务端返回的总匹配数;前端分页则需自己遍历原始数据再 filter 计数
前端分页下想获「全部筛选结果总数」,得自己 filter 原始数据
当 page: false 或前端分页开启时,Layui 不会帮你统计所有匹配项总数,cache 里只有当前页。要得到“筛选条件下总共多少条”,你得保存原始数据,然后手动执行过滤逻辑。
- 初始化时把原始数据存到变量:
var originData = [...] - 监听
search事件,在回调中用originData.filter(...)模拟筛选条件(注意字段名、类型、模糊匹配逻辑要和 Layui 内部一致) - 别依赖
table.config里的筛选状态——它不暴露完整规则,尤其是自定义工具栏触发的搜索
简单场景下可复用 table.getCheckData('id') 配合全选,但这只适用于勾选行为,不是通用筛选计数方案。
真正容易被忽略的是:Layui 的“筛选”没有统一的中间态数据对象,cache 是临时快照,data 是原始快照,二者之间没有自动同步的“筛选结果集”。你需要根据分页模式、触发方式、是否自定义搜索,选择对应的取数路径,而不是默认找一个万能方法。











