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

Layui Table 搜索后 emptyText 不生效的解决方案

为什么 Layui Table 搜索后空数据不显示 emptyText？

许多开发者在初次遇到此问题时，通常会检查配置项。实际上，这并非配置错误，而是框架自身的机制所致。emptyText 配置项仅在表格初次加载且无数据时生效。当数据加载完成后，无论通过搜索过滤出的结果是否为空，Layui 默认都不会再次触发该空文本提示。

• 核心解决方案是在 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()。
• 为便于后续样式维护，建议为自定义的空提示行添加特定 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('未找到匹配项，请调整关键词');
  }
}

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

这是另一个常见问题。即使按照上述方法编写了 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。