Layui表格如何实现搜索结果为空时显示自定义的HTML-Layui教程-PHP中文网

Layui table 搜索后 emptyText 不生效，因其仅在初始加载无数据时显示；搜索过滤为空需在 done 回调中手动判断 res.data.length 并替换 tbody 内容。

layui table 搜索后空数据时 `emptyText` 不生效？

因为 emptytext 只在初始加载无数据时显示，搜索过滤后为空，layui 默认不触发该提示。这是最常被误以为“配置错了”的地方。

必须配合 done 回调手动判断 res.data 长度，再操作 DOM
emptyText 本身对 filter 后的空状态完全无效，别白费劲配它
表格容器（.layui-table-view）里没有预留空状态占位区，得自己加

如何用 `done` 回调注入自定义空 HTML

在 table.render() 的 done 函数里检查数据长度，清空原有 tbody，插入自定义 HTML。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

先用 $(elem).next('.layui-table-box').find('.layui-table-body tbody') 定位到真实 tbody
搜索后 res.data 是过滤后的结果，直接判 res.data.length === 0
插入 HTML 前务必清空 tbody，否则旧行残留；用 .html('...') 而非 .append()
自定义 HTML 最好带 class（如 layui-table-empty），方便后续样式控制

done: function(res, curr, count) {
  const $tbody = $(this.elem).next('.layui-table-box').find('.layui-table-body tbody');
  if (res.data.length === 0) {
    $tbody.html('<tr><td colspan="' + this.cols.length + '" class="layui-table-empty">未找到匹配项，请调整关键词</td></tr>');
  }
}

搜索框绑定和重载时，为什么空状态不更新？

因为搜索通常用 table.reload()，但若没传 where 或没触发服务端重载，done 可能不执行——尤其前端 filter 场景。

前端搜索（data 数组已加载完）：必须手动调用 table.reload() 并确保 done 被触发，或改用 table.cache + table.render({ data: filteredData })
服务端搜索：确保接口返回 data: []，且 done 回调存在并执行
常见坑：reload() 里漏写 done，或把 done 写在原始 render 里却没同步到 reload 配置中