如何在 jQuery Datatable 中将 CSS 表条带化类添加到动态生成的行中？答案

【问题标题】：How to add a CSS table-striped class to dynamically generated row in jQuery Datatable?如何在 jQuery Datatable 中将 CSS 表条带化类添加到动态生成的行中？
【发布时间】：2017-02-28 13:06:22
【问题描述】：

所以我知道，如果您执行 addClass(myCSSClass)，它应该将所述类添加到数据表行。

我的问题是这似乎不起作用。

我的代码如下：

var table = ('#datatable').Datatable();
table.row.add(['<button type="button" id="Details">A button</button>']).addClass("success").draw();

数据表文档中提到了 addClass() 函数。但它不适用于 bootstrap table-striped 类 success。

我需要将 table-striped 类 'success' 添加到我在 Datatable 中创建的行中。我怎样才能让它工作？

【问题讨论】：

标签： jquery css twitter-bootstrap datatable

【解决方案1】：

您不需要 css 类，只需将这些 css 添加到您的代码中即可。

tbody tr:nth-child(odd) {
   background-color: #ccc; `the color you prefer`
}

tbody tr:nth-child(even) {
   background-color: #fff; `the color you prefer`
}

您可以尝试的另一件事是在行创建回调中编写代码，有关此的更多信息可以在这里找到：

https://datatables.net/examples/advanced_init/row_callback.html

【讨论】：

为了给我的来历提供一些背景信息，我需要根据某些条件设置一个类，比如 if(something has occurred) 然后设置类“成功”，否则设置类“警告"。
@Anusha 我刚刚在数据表的“rowCreated”回调中添加了文档
我一直在看。 :) 所以，当我想选择一整行时，我应该这样做 $('tr', row).addClass('success') ??
帮帮忙，我对 jQuery 本身非常陌生，完全不知道如何使用它。 :)
我认为它只是 $(row).addClass("success") 在这个例子中datatables.net/reference/option/createdRow

【解决方案2】：

这是因为您尝试将类添加到不存在的对象。试试我的 sn-p：

$(document).ready(function() {
    var table = $('#datatable').DataTable();
    table.row.add(['<button type="button" id="Details">A button</button>']).draw();
    $('#datatable').find('tr').last().addClass("success");
});

tr.success { background-color:green !important; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"/>

<table id="datatable" class="table">
  <thead>
    <tr>
      <th>1</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

【讨论】：

@Anusha 所以有些事情你没有告诉我们，正如你在上面看到的 sn-p 在我的例子中工作得很好，附加了类，改变了行的背景。
可能是我遗漏了一些重要的东西。它是一个更大项目的一部分，所以我可能在它拥有的所有代码中遗漏了一些东西。 :(

【解决方案3】：

我认为它只是 $(row).addClass("success") 在这个例子中 datatables.net/reference/option/createdRow

（引用@Brent Boden 的评论）感谢您的快速回复！ :)

【讨论】：