layui表格搜索功能怎么实现本地过滤-Layui教程-PHP中文网

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

layui表格搜索功能怎么实现本地过滤

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 是全显示列文本模糊匹配，但你通常只想搜「用户名」或「订单号」这类关键字段。原生不支持白名单，得靠列配置显式开启参与筛选。

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

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

下载

在对应列定义中加 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 执行