When using Javascript array for data, how to set css properties per-row?
When using Javascript array for data, how to set css properties per-row?
Hello,
When using html/DOM input, css classes can be set on a per-row basis and at the server-side:
[code]
Trident
....
[/code]
When using Javascript arrays to pass in table data and headers, is there a way to provide css properties per-row? Such as this mock-up here, where I have added "rowClass=gradeA" in addition to the row's data:
[code]
"aaData": [
[ "Trident", "Internet Explorer 4.0", "Win 95+", 4, "X", "rowClass=gradeA" ],
[/code]
from http://www.datatables.net/examples/data_sources/js_array.html
I know I can do client-side javascript logic to set the css, but I would like to do this on the server side while generating a Javascript array. Should I simply generate html/DOM instead? Is the DOM any slower to parse for the client than a Javascript array of data, for datasets of a few thousands row? Any other ways of setting properties per-row such as color and text style that I have missed?
Thanks,
KG
When using html/DOM input, css classes can be set on a per-row basis and at the server-side:
[code]
Trident
....
[/code]
When using Javascript arrays to pass in table data and headers, is there a way to provide css properties per-row? Such as this mock-up here, where I have added "rowClass=gradeA" in addition to the row's data:
[code]
"aaData": [
[ "Trident", "Internet Explorer 4.0", "Win 95+", 4, "X", "rowClass=gradeA" ],
[/code]
from http://www.datatables.net/examples/data_sources/js_array.html
I know I can do client-side javascript logic to set the css, but I would like to do this on the server side while generating a Javascript array. Should I simply generate html/DOM instead? Is the DOM any slower to parse for the client than a Javascript array of data, for datasets of a few thousands row? Any other ways of setting properties per-row such as color and text style that I have missed?
Thanks,
KG
This discussion has been closed.
Replies
You need to use the fnRowCallback function.
[code]
"fnRowCallback": function(nRow, aData, iDisplayIndex, iRowIndex) {
if (aData[2] == ("A")) {
$('td:eq(2)', nRow).css("background", "#FFFFCC");
}
else if (aData[2].indexOf("B") != -1) {
$('td:eq(2)', nRow).css("background", "#FFCC99");
}
else if (aData[2].indexOf("C") != -1) {
$('td:eq(2)', nRow).css("background", "#99FFFF");
}
else if (aData[6] == 'X') {
$(nRow).css("background", "#CCCCCC");
}
else if (aData[6] == "Y") {
$(nRow).css("background", "#FFCCFF");
}
return nRow;
}
[/code]