layui表格search: true默认走后端搜索,需同时设url为undefined、page为false、data为纯数组才启用前端includes()过滤;搜特定列需列配置filter: true;自定义逻辑须手动监听输入并reload。

layui 表格的 search: true 默认不走本地过滤,只要配置了 url 或开启了分页(page: true),输入关键词就会发请求到 /undefined? 或后端接口——这不是 bug,是设计逻辑。必须显式切断后端依赖,表格才真正用前端数组做 includes() 匹配。
为什么 search: true 点了没反应?先检查这三个配置
常见现象:开了 search: true,输关键词表格不动,控制台报 GET /undefined?... 错误。根本原因是 layui 认为你在用远程数据,搜索就该重载接口。
-
url必须设为undefined或直接删掉 —— 留着任何字符串(包括空串'')都会触发请求 -
page必须设为false—— 否则搜索会强制分页重载,跳回第 1 页且丢掉当前筛选态 -
data必须是已解析的纯数组(如JSON.parse(xhr.responseText)的结果),不能是Promise、函数或未 parse 的字符串
想只搜某几列?得在 cols 里加 filter: true
默认 search: true 是全显示列文本模糊匹配,但你通常只想搜「用户名」或「订单号」这类关键字段。原生不支持白名单,得靠列配置显式开启参与筛选。
- 在对应列定义中加
filter: true(注意是布尔值true,不是字符串'true') - 没加
filter: true的列,哪怕有数据,也不会被table.filter()扫到 - 如果列用了
templet渲染(比如把 status 1/2/3 转成「启用」「停用」),filter: true匹配的是渲染后的文本,不是原始值
要自定义搜索逻辑(比如多条件、大小写敏感、字段限定)?别碰 search: true
search: true 没暴露过滤函数,也不支持传正则或回调。真要控制逻辑,就得自己接管输入事件,绕过它。
- 用
layui.$(document).on('input', '.my-search-input', fn)监听(别用内联oninput,Layui 会剥离) - 从
table.cache['yourTableId']取原始数据(不是table.config.data,那是快照) - 手动
filter():例如item.username?.includes(val) || String(item.id).includes(val) - 调用
table.reload('yourTableId', { data: filtered })重载,但必须同时传page: { curr: 1 },否则页码错位 - 加防抖:每敲一个字都
reload,2000 行数据会卡顿,用setTimeout+clearTimeout延迟 300ms 执行
最易忽略的点:reload 后 checkbox 全清空、滚动条回顶、排序图标重置——这不是意外,是 reload 的默认行为。你要留状态,就得自己存 ID 集合、记当前页码、监听 done 回调手动恢复 DOM 类名。别指望它自动记住。


















