layui表格前端搜索过滤应使用table.filter()而非reload()，前提是用data数组初始化、配置lay-filter与lay-search、列显式设filter:true，filter仅重绘tbody并保留页码/选中态等状态。
layui table 前端搜索过滤靠 filter 方法，不是重载数据
layui 的 table 模块本身不内置“输入即搜”的前端过滤逻辑，它默认只做后端分页和渲染。想实现前端搜索（即不发请求、仅对已加载的数据重新筛选），必须手动拦截搜索行为，用 table.filter 触发本地重绘，而不是调用 table.reload 去请求接口。
常见错误是：给搜索框绑定 input 事件后直接 table.reload({ where: { keyword: val } }) —— 这会触发后端请求，完全没走前端过滤。
- 前端过滤的前提是：所有数据已一次性加载进 JS 变量（比如存在
globalData里），而非靠url分页拉取 -
table.filter('your-table-id')会强制表格根据当前data和filter配置重新渲染，但不会改变原始数据源 - 必须配合
table.config.data = filteredArray手动更新表格内部数据引用，否则filter不生效
搜索时怎么动态替换表格的 data 源？
layui 表格的 data 选项在初始化后就固化了，后续修改配置对象不会自动同步。要让 filter 生效，得先改 table.config.data，再调用 filter。
示例逻辑：
// 假设原始数据存在全局变量 rawData 中
let rawData = [/* 你的全部数据 */];
let currentData = [...rawData]; // 当前显示的数据副本
<p>// 初始化表格时用 currentData
table.render({
elem: '#demo',
id: 'demo',
data: currentData,
cols: [[/<em> 列配置 </em>/]]
});</p><p>// 搜索框 input 事件
document.getElementById('searchInput').addEventListener('input', function() {
const keyword = this.value.trim();
if (!keyword) {
currentData = [...rawData];
} else {
currentData = rawData.filter(item =>
item.title?.includes(keyword) || item.id?.toString().includes(keyword)
);
}</p><p>// 关键两步：更新 config.data + 调用 filter
table.config['demo'].data = currentData;
table.filter('demo');
});
</p>
为什么 table.reload 不能替代前端过滤？
table.reload 设计目标是重新请求服务端或重绘，即使你传入 data 参数，它也会清空原有数据并完全替换——但这个过程会丢失表格当前页码、排序状态、选中行等上下文，且触发 done 回调两次（一次清空，一次重载），UI 会有明显闪动。
-
reload会重置page为第 1 页，即使你只搜第 3 页的数据 - 如果启用了
checkbox或radio，reload后所有勾选状态丢失 - 自定义工具栏按钮、行内操作按钮的事件绑定需手动重绑，否则失效
- 而
filter仅刷新 tbody，保留分页器位置、当前页码、排序图标、已选状态
兼容性注意：layui 2.8+ 的 config 访问方式变了
旧版 layui（2.6.x）可通过 table.config['id'] 直接访问；2.8+ 开始，config 改为私有属性，推荐用 table.getOptions('id') 获取配置，但该方法返回的是只读副本。真正可写的仍是 table.config 对象（虽然文档没写，但源码里仍暴露）。
稳妥写法（兼容 2.6–2.8）：
const ins = table.get('demo'); // 先拿到实例
if (ins && ins.config) {
ins.config.data = currentData;
} else {
// fallback：尝试 table.config
table.config['demo'].data = currentData;
}
table.filter('demo');
别依赖 table.cache 做过滤源，它是渲染后的 DOM 映射，不含原始字段，且含分页截断数据，容易漏匹配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
