在 jquery 数据表样式（此处为平滑度）中，它显示具有不同颜色的行。是什么决定了每行显示哪些颜色？我该如何改变呢？从下载包中的示例中查看下面的示例。
问问题
12500 次
2 回答
2
啊哈...我找到了答案。在来自服务器表行的原始 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; }
于 2013-09-06T11:34:32.450 回答
0
在这种情况下，使用以下类应用特定颜色。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 提供自定义类以进行样式设置 - 数据表和 jQuery
这是一个带过滤器的：
于 2013-09-05T21:29:51.557 回答