sClass per Column Alternate Row problems.
sClass per Column Alternate Row problems.
Hi,
I would like to add/apply a sClass for a specific column but would like to include alternate row colors as well. I used the sample code given in your "DataTables with column rendering" sample using Style testClassA.
Sample code used:
[code]
$('#example').dataTable( {
"aoColumns": [
/* Engine */ null,
/* Browser */ null,
/* Platform */ null,
/* Version */ { "bVisible": true },
/* Grade */ { "sClass": "testClassA"}
]
} );
[/code]
testClassA:
[code]
.testClassA
{
BACKGROUND-COLOR: #F5D607;
TEXT-ALIGN: center;
}
.testClassB
{
BACKGROUND-COLOR: #FCEE78;
TEXT-ALIGN: center;
}
[/code]
This worked fine but I would like to combine testClassB in the last column of my table ("Grade" colum as per sample). I tried various options without success.
I would like to add/apply a sClass for a specific column but would like to include alternate row colors as well. I used the sample code given in your "DataTables with column rendering" sample using Style testClassA.
Sample code used:
[code]
$('#example').dataTable( {
"aoColumns": [
/* Engine */ null,
/* Browser */ null,
/* Platform */ null,
/* Version */ { "bVisible": true },
/* Grade */ { "sClass": "testClassA"}
]
} );
[/code]
testClassA:
[code]
.testClassA
{
BACKGROUND-COLOR: #F5D607;
TEXT-ALIGN: center;
}
.testClassB
{
BACKGROUND-COLOR: #FCEE78;
TEXT-ALIGN: center;
}
[/code]
This worked fine but I would like to combine testClassB in the last column of my table ("Grade" colum as per sample). I tried various options without success.
This discussion has been closed.
Replies
[code]
table.display tr.odd.testClassA {
background-color: #F5D607;
}
table.display tr.even.testClassA {
background-color: #91D130;
}
[/code]
I used
[code]
tbody tr.even td.gradeB {
background-color: #ECFFB3;
}
tbody tr.odd td.gradeB {
background-color: #E6FF99;
}
[/code]
Is there any documentation on this?
Good to hear you got this sorted. There isn't any explicit documentation for this, but there is documentation which says that the stripping classes (odd/even) are applied to the TR elements ( http://datatables.net/usage#asStripClasses ) and documentation that says that sClass is applied to the TD cells ( http://datatables.net/usage#sClass ).
Putting the two together will result in the selector you arrived at above.
It's worth noting that if you haven't installed Firebug yet, it is perhaps worth doing as it is a superb tool for this kind of thing. Also MRI from WestCiv is a superb bookmarklet for testing selectors: http://westciv.com/mri/
Regard,
Allan