Layui表格如何实现搜索结果为空时显示自定义的HTML

Layui Table 搜索后 emptyText 不生效？原因解析与手动控制方案

layui table 搜索后空数据时 emptyText 为何失效？

许多开发者在处理 Layui 表格搜索功能时，都会遇到一个典型问题：当过滤结果为空时，预设的 emptyText 提示文本并未出现。这并非配置失误，而是由 Layui Table 组件自身的渲染机制决定的。emptyText 属性仅在表格首次初始化且数据为空时生效。一旦完成初始数据加载，后续通过搜索条件进行的数据过滤，无论结果集是否为空，框架都不会自动触发该空状态提示。

免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈

• 根本解决方案在于利用 done 回调函数，手动判断数据长度并操作 DOM 来显示自定义提示。
• 需要明确：emptyText 对搜索过滤后的空数据状态完全无效，无需在此配置项上继续调试。
• 其底层原因是，表格视图容器（.layui-table-view）并未为动态过滤后的“无数据”场景预留渲染占位符，因此需要开发者主动介入处理。

如何使用 done 回调动态注入自定义空状态 HTML

核心在于 table.render() 方法提供的 done 回调。我们需要在此函数中判断返回的数据，并动态更新表格体内容。

• 首先，准确获取承载表格数据的 tbody 元素。通用选择器路径为：$(elem).next('.layui-table-box').find('.layui-table-body tbody')。
• 判断逻辑直接：检查回调参数 res.data 数组的长度是否为 0。
• 操作细节：在插入新的空提示 HTML 前，应先清空 tbody 原有内容，避免残留数据行。推荐使用 .html('...') 进行整体替换，而非 .append()。
• 为便于后续样式管理，建议为自定义的空提示行添加专属类名，例如 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('未找到匹配项，请调整关键词');
  }
}

搜索绑定与表格重载时，空状态为何不更新？

这是另一个常见痛点。即使正确编写了 done 回调，在触发搜索时，空状态提示也可能时有时无。问题通常出在数据重载的逻辑环节。

• 前端搜索场景（基于已加载的全部数据进行本地过滤）：若通过操作 table.cache 或过滤数组实现搜索，必须确保手动调用 table.reload() 以触发视图更新，并保证 done 回调能被执行。更直接的方法是使用过滤后的新数组，重新执行 table.render({ data: filteredData })。
• 后端搜索场景：此场景相对简单，需确保搜索接口在无匹配数据时返回 data: []，并且在调用 table.reload() 时，配置中包含了已定义的 done 回调函数。
• 高频错误点：在初始 table.render 中定义了 done，但在后续调用 table.reload() 进行搜索时，未将此回调函数传递过去，导致回调失效，空状态无法显示。

自定义空状态 HTML 的样式与交互注意事项

解决显示问题后，还需关注视觉美观与用户体验。直接插入的 单元格，其默认样式可能与表格设计不协调。

• 快速调整样式推荐使用内联样式，例如：style="text-align: center; padding: 40px 0; color: #999;"，可快速实现居中、增加留白及设置浅色文字。
• 交互注意事项：避免在空提示行内使用 或 等可获取焦点的元素。否则，用户使用键盘 Tab 键进行焦点导航时，可能会陷入这个视觉上不可见的交互元素，导致体验中断。
• 若空提示中需要包含“重新加载”或“清除搜索”按钮，务必使用 event.stopPropagation() 阻止事件冒泡，防止点击按钮时意外触发表格行的点击事件，引发逻辑错误。
• 最后，colspan 属性的值必须与表格当前列数严格匹配，否则会引起布局混乱。动态获取列数是良好实践，如前例中的 this.cols.length。