如何隐藏DataTables完整表格（含表头表尾）仅显示搜索结果行？

可以通过CSS初始隐藏目标元素，结合DataTables的事件监听来实现需求，具体方案如下：

1. 初始样式设置 #

先通过CSS隐藏表头、表尾，若需要初始无搜索时完全隐藏表格，可同时隐藏表格主体：

/* 隐藏表头和表尾 */
#your-table thead,
#your-table tfoot {
  display: none;
}

/* 可选：初始状态隐藏表格主体，仅搜索有结果时显示 */
#your-table tbody {
  display: none;
}

2. 关联搜索框并动态控制显示 #

初始化DataTables后，监听搜索框输入事件和表格重绘事件，根据搜索结果调整表格主体的显示状态：

// 初始化DataTables（替换成你的表格ID和现有配置）
const table = $('#your-table').DataTable({
  // 你的配置项，比如columns、ajax、pagination等
});

// 监听自定义搜索框的输入事件（替换成你的搜索框ID）
$('#custom-search').on('input', function() {
  const searchVal = $(this).val().trim();
  // 执行搜索并触发表格重绘
  table.search(searchVal).draw();
});

// 表格重绘时判断搜索结果，控制tbody显示
table.on('draw.dt', function() {
  const filteredRows = table.rows({ search: 'applied' }).count();
  if (filteredRows > 0) {
    $('#your-table tbody').show();
  } else {
    $('#your-table tbody').hide();
  }
});

额外说明 #

• 若不需要初始隐藏表格主体（比如希望默认显示全量数据但隐藏表头表尾），删除CSS中#your-table tbody { display: none; }即可。
• 若要控制整个表格容器的显示，可给表格外层容器添加类名，通过搜索结果切换容器的display属性。

内容的提问来源于stack exchange，提问作者Tanya von Degurechaff