What determines row color in jquery datatable styles?

Question

In jquery datatable styles (here smoothness) it shows the rows with a different color. What determines which colors are show on each row? And how can I change this? See example below from their examples in download pack.

enter image description here

apparently it has something to do with this td.sorting_1, td.sorting_2, td.sorting_3 https://datatables.net/release-datatables/examples/advanced_init/highlight.html . But I did not figure it out. I hope some of you have? — thomas nn, Sep 05 '13 at 21:16
The colors are determined by the value in the last column. But I can't find where in the html or css it is specified that the last column are the source for the colors. Any ideas? — thomas nn, Sep 05 '13 at 21:29

score 2 · Answer 1 · answered Sep 06 '13 at 11:34

Aha... I found the answer. in the original html document from the server table rows has its class set differently depending on what data is in the last column e.g.:

<tr class="gradeC">

Then you can view the resulting html after the datatable() function does its job. It adds even or odd to the class string. like

<tr class="gradeC odd">

When you sort a column, then the sorting function will add a " sorting_1" to the class string on cells in that column.

All the colors are set in the css file like this:

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * 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; }

score 0 · Answer 2 · edited May 23 '17 at 10:30

In this case the specific colors are being applied using the following classes. gradeA, gradeB, gradeC, etc.. I am not sure if those where dynamically generated somehow and or if they used jQuery Theme Roller. I am assuming they used theme roller to generate the styles. Anyways.. all you would need to do is use the custom classes options to add classes to your table.

See Here: https://datatables.net/styling/custom_classes

And then from there you should be able to do something like this:

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

-and-

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

Here is a somewhat similar question:

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

And here is one with filters:

datatables add class to filters

What determines row color in jquery datatable styles?

2 Answers2