什么决定了 jquery 数据表样式中的行颜色？

Posted 2023-05-07

【中文标题】什么决定了 jquery 数据表样式中的行颜色？

【英文标题】：What determines row color in jquery datatable styles?

【发布时间】：2013-09-09 20:05:46

【问题描述】：

在 jquery 数据表样式（这里是平滑度）中，它以不同的颜色显示行。 是什么决定了每行显示哪些颜色？我该如何改变呢？ 从下载包中的示例中查看下面的示例。

【问题讨论】：

它应该在文档中...datatables.net/styling

显然与这个 td.sorting_1, td.sorting_2, td.sorting_3 datatables.net/release-datatables/examples/advanced_init/… 有关。但我没有弄清楚。我希望你们中的一些人有？

颜色由最后一列的值决定。但是我找不到在 html 或 css 中指定最后一列是颜色源的位置。有什么想法吗？

【参考方案1】：

啊哈……我找到了答案。 在来自服务器表行的原始 html 文档中，其类设置不同，具体取决于最后一列中的数据，例如：

<tr class="gradeC">

然后，您可以在 datatable() 函数完成其工作后查看生成的 html。它向类字符串添加偶数或奇数。喜欢

<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; 

【参考方案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; 

这是一个有点类似的问题：

Giving custom classes to each TD for styling - Datatables & jQuery

这是一个带过滤器的：

datatables add class to filters