如何将类添加到由数据表创建的 THEAD？答案

【问题标题】：How do I add a class to THEAD created by datatables?如何将类添加到由数据表创建的 THEAD？
【发布时间】：2020-08-19 14:27:12
【问题描述】：

我正在使用 javascript 创建一个数据表。应用程序本身使用引导程序，并且当前所有表都通过将“thead-dark”类添加到 .但是，使用源数据生成时，datatables 不会添加此类。我浏览了数据表文档，但找不到已经内置的解决方案。所以我去了谷歌并尝试了一些不同的东西，但没有成功。我精通 PHP，但我对 Javascript 没有太多经验。而且由于该表将用作文档管理器，因此 PHP 不太适合这项工作。因为我需要一直重新加载页面。

感谢您的帮助！

HTML：

<div class="tab-pane" id="documents">
    <div class="table-responsive">
        <table id="documents_tbl" class="table table-hover table-striped table-bordered dt-responsive" style="width:100%"></table>
    </div>
</div>

JAVASCRIPT：

<script>
    var dataSet = [
      [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
      [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ],
      [ "Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "$163,000" ],
      [ "Michelle House", "Integration Specialist", "Sydney", "2769", "2011/06/02", "$95,400" ],
      [ "Suki Burks", "Developer", "London", "6832", "2009/10/22", "$114,500" ],
      [ "Prescott Bartlett", "Technical Author", "London", "3606", "2011/05/07", "$145,000" ],
      [ "Gavin Cortez", "Team Leader", "San Francisco", "2860", "2008/10/26", "$235,500" ],
      [ "Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "$324,050" ],
      [ "Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,675" ]
    ];
    $(document).ready(function() {
      $('#documents_tbl').DataTable({
        data: dataSet,
        columns: [
          { title: "Name" },
          { title: "Position" },
          { title: "Office" },
          { title: "Extn." },
          { title: "Start date" },
          { title: "Salary" }
        ]
      });
    });
</script>

【问题讨论】：

标签： javascript datatable

【解决方案1】：

我想您只是想在数据表呈现后向表中添加一个类。

您可以在数据表调用之后调用它：

$('#documents_tbl thead').addClass('thead-dark');

不要忘记，如果你添加了 Datatables 的样式表，有些东西可能会干扰这个。

【讨论】：

这会将类添加到而不是。这就是我遇到的困难。我正在尝试将该类应用于生成的 .

没问题！我会编辑！我不知道你的 CSS 知识，但这些选择器的工作原理是一样的！

我有一个后续问题。如何引用表格前的最后一个 div？

看看这个：api.jquery.com/closest。所以它可能类似于 $('#documents_tbl thead').closest('div')

【解决方案2】：

你可以在表初始化后添加类。

$('#documents_tbl_wrapper thead tr th').each(function () { $(this).addClass('thead-dark') })

【讨论】：