什么决定了jQuery DataTable样式中行的颜色？

Question

在 jQuery 数据表格样式 (这里是 smoothness) 中，它会用不同的颜色来显示行。那么是什么决定了每一行显示哪些颜色？我该如何更改它呢？请参考下载包中的示例下面的示例图。

- thomas nn

---

应该在文档中可以找到... https://datatables.net/styling/ - khollenbeck

显然，这与td.sorting_1、td.sorting_2、td.sorting_3有关 https://datatables.net/release-datatables/examples/advanced_init/highlight.html。但我还没有弄清楚。希望你们中的一些人能够解决？ - thomas nn

颜色由最后一列的值确定。但我找不到在HTML或CSS中指定最后一列是颜色来源的地方。有什么想法吗？ - thomas nn

Answer 1

啊哈...我找到答案了。 在原始的HTML文档中，来自服务器的表格行根据最后一列中包含的数据设置不同的类，例如：

<tr class="gradeC">

在datatable()函数完成其工作后，您可以查看生成的HTML。它将even或odd添加到类字符串中。

<tr class="gradeC odd">

当您对某一列进行排序时，排序函数将在该列的单元格类字符串中添加“sorting_1”。

所有颜色都在CSS文件中设置如下：

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * DataTables row classes
 */
table.display tr.odd.gradeA { background-color: #ddffdd; }
table.display tr.even.gradeA { background-color: #eeffee; }
table.display tr.odd.gradeA { background-color: #ddffdd; }
table.display tr.even.gradeA { background-color: #eeffee; }
table.display tr.odd.gradeC { background-color: #ddddff; }
table.display tr.even.gradeC { background-color: #eeeeff; }
table.display tr.odd.gradeX { background-color: #ffdddd; }
table.display tr.even.gradeX { background-color: #ffeeee; }
table.display tr.odd.gradeU { background-color: #ddd; }
table.display tr.even.gradeU { background-color: #eee; }

tr.odd { background-color: #E2E4FF; }
tr.even { background-color: white; }

tr.odd.gradeA td.sorting_1 { background-color: #c4ffc4; }
tr.odd.gradeA td.sorting_2 { background-color: #d1ffd1; }
tr.odd.gradeA td.sorting_3 { background-color: #d1ffd1; }
tr.even.gradeA td.sorting_1 { background-color: #d5ffd5; }
tr.even.gradeA td.sorting_2 { background-color: #e2ffe2; }
tr.even.gradeA td.sorting_3 { background-color: #e2ffe2; }
tr.odd.gradeC td.sorting_1 { background-color: #c4c4ff; }
tr.odd.gradeC td.sorting_2 { background-color: #d1d1ff; }
tr.odd.gradeC td.sorting_3 { background-color: #d1d1ff; }
tr.even.gradeC td.sorting_1 { background-color: #d5d5ff; }
tr.even.gradeC td.sorting_2 { background-color: #e2e2ff; }
tr.even.gradeC td.sorting_3 { background-color: #e2e2ff; }
tr.odd.gradeX td.sorting_1 { background-color: #ffc4c4; }
tr.odd.gradeX td.sorting_2 { background-color: #ffd1d1; }
tr.odd.gradeX td.sorting_3 { background-color: #ffd1d1; }
tr.even.gradeX td.sorting_1 { background-color: #ffd5d5; }
tr.even.gradeX td.sorting_2 { background-color: #ffe2e2; }
tr.even.gradeX td.sorting_3 { background-color: #ffe2e2; }
tr.odd.gradeU td.sorting_1 { background-color: #c4c4c4; }
tr.odd.gradeU td.sorting_2 { background-color: #d1d1d1; }
tr.odd.gradeU td.sorting_3 { background-color: #d1d1d1; }
tr.even.gradeU td.sorting_1 { background-color: #d5d5d5; }
tr.even.gradeU td.sorting_2 { background-color: #e2e2e2; }
tr.even.gradeU td.sorting_3 { background-color: #e2e2e2; }

- thomas nn

Answer 2

在这种情况下，特定的颜色是使用以下类应用的：gradeA，gradeB，gradeC等。我不确定它们是否以某种动态方式生成，或者是否使用了jQuery Theme Roller。 我假设他们使用主题滚轮来生成样式。 无论如何...您只需要使用自定义类选项将类添加到表中即可。

参见此处：https://datatables.net/styling/custom_classes 然后从那里开始，您应该能够做出这样的事情：

oTable = $('#example').dataTable( {  
    "aoColumns" : [     
        {  sClass: "myCustomClass" }  
    ]});

-和-

table.display tr.even.myCustomClass { background-color: #ffdddd; }
table.display tr.odd.myCustomClass { background-color: #ffeeee; }

以下是关于编程的内容：

这里有一个类似的问题：

给每个TD添加自定义类进行样式设计 - Datatables & jQuery

这里还有一个关于筛选器的：

datatables 添加筛选器类

- khollenbeck