如何在 jQuery DataTables 中完全抑制表头？

Posted 2023-05-07

【中文标题】如何在 jQuery DataTables 中完全抑制表头？

【英文标题】：How to suppress table headers completely in jQuery DataTables?

【发布时间】：2011-10-07 14:48:23

【问题描述】：

我正在使用 jQuery 的 DataTables 插件 (www.datatables.net) 在网页上显示表格。

阅读文档并进行一些搜索后，我无法找到如何使用 DataTables 选项或 API 完全抑制或隐藏表头。

【参考方案1】：

你为什么不简单地通过 css 隐藏它们（我认为数据表需要一个 thead 部分才能工作）？

.dataTables_wrapper table thead
    display:none;

在这里摆弄：http://jsfiddle.net/LhZF3/

【讨论】：

谢谢。混用 DOM/CSS 不是最优雅的解决方案，但至少它有效 :-)

效果很好，但 API 本身不会公开这样的功能仍然很奇怪。

【参考方案2】：

我知道这个问题很老了，但我今天搜索了一下，找到了另一个解决方案......

在你的 js/coffee 文件中：

$("#selector").dataTable(
  ... your other options ...

  fnDrawCallback: -> $("#selector thead").remove()
)

纯 JS 变体：

$("#selector").dataTable(
  ... your other options ...

  fnDrawCallback: function() 
    $("#selector thead").remove();
  
);

【讨论】：

这对我有用 - 使用 display:none 表头仍然会影响正文渲染..

参见此处：***.com/questions/16802753/…

【参考方案3】：

简单地将样式display:none内联样式添加到您的thead标签。

    <thead style="display:none;">
    </thead>

【参考方案4】：

只需将其添加到您的 css 中：

thead 
  display:none;

【讨论】：

小心。这将禁止所有表中的所有标题，无论是否有数据表。