layui table本地搜索默认不生效是因为开启分页且配置了url，导致搜索强制走接口；需设page: false、url: undefined，并确保data为已解析的数组。
layui table 本地搜索为什么默认不生效
因为 layui.table 默认开启分页且数据源是远程（url 配置），即使你传了本地数组，只要没显式关掉 page 和 url，搜索就会走接口重载，根本不会在前端过滤。
常见错误现象：search: true 开了，但输入关键词没反应；或者一搜就报 GET /undefined?... 错误。
- 必须把
url设为undefined或删掉，否则 layui 会强行发起请求 -
page要设为false，否则即使有数据，搜索也会触发分页重载 -
data必须是真实数组（不能是 Promise、函数或未解析的 JSON 字符串）
如何正确配置 table 实现纯前端搜索
核心是告诉 layui：“这是静态数据，别发请求，直接筛”。重点不在搜索框本身，而在表格初始化时的数据加载策略。
示例关键配置：
layui.table.render({
elem: '#demo',
data: yourLocalDataArray, // ✅ 必须是已解析的数组
cols: [[{field:'title', title:'标题'}]],
page: false, // ✅ 关闭分页
url: undefined, // ✅ 断掉后端依赖
search: true // ✅ 搜索框才真正走本地过滤
});
-
yourLocalDataArray如果来自JSON.parse()，确保没有语法错误，否则data会静默失效 - 如果数据量超过 5000 行，搜索响应可能变慢——layui 是遍历全量数组做
indexOf匹配，不支持模糊高亮或字段指定 - 搜索默认匹配所有显示列的文本内容，无法限定只搜某几列
想限定搜索字段或加模糊逻辑怎么办
layui 原生 search 不提供钩子，也没暴露过滤函数。真要控制逻辑，就得绕过它，自己接管搜索行为。
- 把
search: false关掉，手动加一个<input>搜索框 - 监听
input事件，用layui.table.filter('yourTableId')触发重绘 - 在
data回调里做自定义过滤：返回新数组，而非原数组
简短示意：
let rawData = [...yourData];
document.getElementById('searchInput').addEventListener('input', function() {
const v = this.value.trim();
const filtered = v
? rawData.filter(item => item.title.includes(v) || item.id == v)
: rawData;
layui.table.reload('yourTableId', { data: filtered });
});
注意：table.reload 会重绘整表，如果频繁输入，建议加 setTimeout 防抖，不然滚动条会跳、焦点会丢。
容易被忽略的兼容性细节
layui 2.8+ 对本地搜索做了小优化，但老版本（如 2.5.7）在 page: false 下仍可能漏触发搜索重绘。
- 务必检查控制台有没有
Uncaught TypeError: Cannot read property 'length' of undefined—— 这通常是因为data是null或未定义，而不是空数组 - 如果表格用了
skin: 'row'或size: 'sm'，不影响搜索逻辑，但某些 CSS 可能遮挡搜索框，需手动调toolbar位置 - 移动端键盘收起后，搜索框失去焦点导致结果未更新？得监听
blur再补一次reload
本地搜索不是“开了就灵”，它依赖你对 data 生命周期和 table.reload 触发时机的把握。最常卡住的地方，其实是以为数据给了，其实它压根没进 table 实例。
