首页 > 网页制作 >Layui表格如何实现搜索结果为空时显示自定义的HTML

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

来源：互联网 2026-04-14 11:38:02

Layui Table 搜索后 emptyText 不生效的解决方案为什么 Layui Table 搜索后空数据不显示 emptyText？许多开发者在初次遇到此问题时，通常会检查配置项。实际上，这并非配置错误，而是框架自身的机制所致。emptyText 配置项仅在表格初次加载且无数据时生效。当

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() 时未同步传递该回调函数，导致搜索后回调失效，空状态无法显示。