I'm using datatables for displaying server-side data in tables.
I can't target and style individual cells (<TD>
) though. I search a bit and found it might be possible with:
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
....
}
... but I'm not quite sure how because I have a few table and not all have the same number of columns and rows. I want to give common class to all TDs
of a 'column'.
You can use sClass
parameter in Columns definition. For example, if you have 3 columns and want to pass custom class for second and third column, you can:
"aoColumns": [
null,
{ "sWidth": "95px", "sClass": "datatables_action" },
{ "sWidth": "45px", "sClass": "datatables_action" }
]
You can check datatables documentation
You can use columnDefs
to define classes for each column.
Example in coffeescript:
$('table').dataTable(
columnDefs: [
{
targets: -1 # targets last column, use 0 for first column
className: 'last-column'
}
]
);
This is using new API 1.10+.
For those who found this question when searching for fnRowCallback
and want to add styling based on cell content rather than using static css classes, using the fnRowCallback
will do the trick:
oTable = $('#matrix').dataTable({
...
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
for (var i in aData) {
// Check if a cell contains data in the following format:
// '[state] content'
if (aData[i].substring(0,1)=='[') {
// remove the state part from the content and use the given state as CSS class
var stateName= aData[i].substring(1,aData[i].indexOf(']'));
var content= aData[i].substring(aData[i].indexOf(']')+1);
$('td:eq('+i+')', nRow).html(content).addClass(stateName);
}
}
}
});
Hope this may be useful for some future visitor :-)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With