sClass per Column Alternate Row problems.

Gerhard

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.

Gerhard

I tried using the following CSS

[code]
table.display tr.odd.testClassA {
background-color: #F5D607;
}

table.display tr.even.testClassA {
background-color: #91D130;
}
[/code]

Gerhard

Ok - I found the problem.

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?

allan

Hi Gerhard,

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