必须用templet函数渲染表头过滤框，2.8+才支持且需清空title字段；事件须用layui.$代理绑定并防抖；过滤应修改table.cache后reload并重置页码。
表头下方加过滤输入框必须用 templet，不能写死 HTML 字符串
很多人直接在 title 里拼 <input class="layui-input">，结果输入框渲染出来但点不进去、事件绑不上、甚至整个表头被转义成纯文本——这是因为 layui 2.7 及更早版本压根不支持在 title 字段中解析 html，2.8+ 才开放 templet 对 title 的支持，且只认函数返回值。
正确写法是：在列配置中为需要加搜索框的字段显式声明 templet: function(d) { return '<div>' + d.title + '</div><input type="text" class="search-input-' + d.field + '">'; }。注意：d 是列配置对象，d.field 是字段名（如 'username'），不是表格某行数据。
-
templet函数必须返回完整字符串，不能只返回<input>；否则表头文字会丢失 - 每个输入框的
class必须带唯一标识（比如拼上d.field），否则多个列共用一个 class 会导致事件监听错乱 - 不要用
id，Layui 表格重载时 DOM 会重建，id冲突或重复会导致document.getElementById总拿第一个
监听输入要用事件代理，不能靠 oninput 内联写法
Layui 渲染时会剥离所有内联事件（如 oninput="filterUser()"），所以必须用事件代理方式绑定。而且得等表格完全渲染完再绑定，否则 DOM 还没生成就去查 .search-input-xxx，查不到。
推荐写法：layui.$(document).on('input', '.search-input-username', debounce(function(e) { filterByField('username', e.target.value); }, 300));
- 必须用
layui.$，不是原生$，避免 jQuery 版本冲突 - 加
debounce防抖（自己写或引入 lodash），否则每敲一个字都触发一次过滤，卡顿明显 - 取值统一用
e.target.value，别用layui.$(e.target).val()——虽然也能用，但多一层封装无必要，且在动态创建的 input 上有时不稳定 - 空值判断要显式写
if (!val.trim())，否则用户输空格后过滤失效
前端过滤别调 table.reload()，改 table.cache 后手动刷新更稳
每次输入都 table.reload({ data: filteredData }) 看似简单，实际会导致：滚动条跳回顶部、已勾选行丢失、分页器重置、表头排序状态清空。真正轻量的做法是只更新缓存并触发视图重绘。
核心逻辑是：var cache = table.cache['yourTableId']; var filtered = cache.filter(row => row.username.includes(keyword)); table.cache['yourTableId'] = filtered; table.reload('yourTableId', { page: { curr: 1 } });
-
table.cache是原始数据快照，修改它不会影响原始请求数据源，安全 - 必须传
page: { curr: 1 }，否则当前页码可能超出新数据总页数，导致空白页 - 如果需要保留当前页码（比如用户正在看第 3 页，过滤后仍有足够数据），就得在
done回调里手动计算并重设curr - 模糊匹配优先用
String.prototype.includes()，不用正则——用户输[或(会直接报错
Layui 2.7 和 2.8+ 的 templet 行为差异是最大兼容性坑
如果你升级了 Layui 但表头输入框还是不显示，先运行 console.log(layui.version) 确认版本。2.7 不支持 title 上的 templet，写了也静默忽略；2.8+ 才正式支持，但要求你把 title 字段删掉，全交给 templet 返回。
错误示范：{ field: 'username', title: '用户名', templet: '<input>' } —— 这会在 2.8+ 下显示“用户名”，文字和输入框叠一起。
- 正确写法（2.8+）：
{ field: 'username', title: '', templet: function(d) { return '<div class="th-title">' + d.title + '</div><input class="search-input-' + d.field + '">'; } } - 旧项目没升级的，只能放弃
templet，改用table.on('created', ...)后用原生 DOM 操作往.layui-table-header th里insertAdjacentHTML，但表格重载时需手动清理，容易漏 - 所有输入框的
placeholder要在templet字符串里写死，Layui 不会帮你补
