What determines the color of strings in jQuery datatable styles?

Question

In jQuery datatable styles (here smoothness) it shows rows with a different color. What determines what colors are displayed on each line? And how can I change that? See the example below from their examples in the download package.

Answer 1

Yeah ... I found the answer. in the source html-document from the rows of the server table has its own set of classes differently depending on what data is in the last column, for example:

<tr class="gradeC"> 

Then you can view the resulting html after the datatable () function does its job. It adds an even or odd class line. as

 <tr class="gradeC odd"> 

When sorting a column, the sort function adds “sorting_1” to the class row in the cells of that column.

All colors are set in the css file as follows:

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

Answer 2

In this case, specific colors are applied using the following classes. gradeA , gradeB , gradeC , etc. I'm not sure if those are dynamically generated in some way, and if they use jQuery Theme Roller. I guess they used a theme video to create styles. Anyway .. all you have to do is use custom class parameters to add classes to the table.

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

And then from there you can do something like this:

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

th -

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

Here are some similar questions:

Providing custom classes for each TD for styles - Datatables and jQuery

And here is one with filters:

datatables add class to filters