Colouring cells in server side table

markwoowoo

Hi, I have a table that is populated from an SQL table that contains an extra column containing strings of letters. These letters correspond to the desired background colours for the cells in the row. I have looked at the forum discussions regarding changing the row colours but am at a bit of a loss as to how to achieve the effect that I need. The problems\gaps in my knowledge as I see them are as follows: I don't know how to access the attributes of individual cells; if the code that will change the colours of the cells is in the table initialisation script then won't that significantly lengthen the loading time of the table? As you can probably tell, I'm in a bit of a muddle over this and would really appreciate a pointer in the right direction. Thanks

montassis

One way to do this is to add a class to the tag and have your CSS define a new background colour. You do not define the colours in the initialization, it is done via CSS

eg. (by the way im not excellent at this, and I havent tested this code, but im sure its something like...)
[code]
var oTable;

$(document).ready(function()
{
oTable = $('#admin_table').dataTable( {
// change these to suit your setup
"bJQueryUI": true,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "database/datatables/JSON.php?request=admin", //whatever you have here
"fnDrawCallback": fnRedraw // this is important
});
});

// Will add the css class red for table cells containing 'version 1.0' and blue for table cells containing 'version 2.0'
function fnRedraw( oSettings ) {
$('td', oTable.fnGetNodes()).each( function () {

$(this).addclass(function() {
if($(this).html == "Version 1.0")
$(this).addClass('red');
if($(this).html == "Version 2.0")
$(this).addClass('blue');

// force table to be drawn again
oTable.fnDraw();
});
});
}
[/code]

allan

Assuming your are using server-side processing, possibly the best way to do this is to use fnRowCallback ( http://datatables.net/usage/callbacks#fnRowCallback ) - it will give you access to the TR node (and this the TD children) and the raw data.

Allan

markwoowoo

Thanks for the help - here's what I came up with:
[code]
$(document).ready( function () {
var oTable = $('#example').dataTable({"bPaginate" : false,"bJQueryUI": true,"bProcessing": true,
"bServerSide": true, "sAjaxSource": "../examples_support/server_processing.php", "aoColumns": [ {"bVisible": false }, null,null,null,null, null,null, null,null, null,null, null,null, null,null, null, null ], "fnRowCallback": function( nRow, aData, iDisplayIndex ) {

var colours = aData[0];
var col = colours.split('');
switch(col[0]){
case 'A': $('td:eq(0)', nRow).css("background-color","#00CCFF"); break;
case 'B': $('td:eq(0)', nRow).css("background-color","#00CC00"); break;
case 'C': $('td:eq(0)', nRow).css("background-color","#009966"); break;
case 'D': $('td:eq(0)', nRow).css("background-color","#FF0000"); break;
case 'Y': $('td:eq(0)', nRow).css("background-color","#FFFF33"); break;
case 'Z': $('td:eq(0)', nRow).css("background-color","#999999"); break;
}
return nRow;
} });
new FixedHeader( oTable );});


[/code]
It works, but I want to iterate through 'col' and replace the number zero with a reference instead and my attempts to do so result in an uncoloured table whichever method I use. Is there some technical reason why this might be?