Colouring cells in server side table
Colouring cells in server side table
markwoowoo
Posts: 5Questions: 0Answers: 0
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
This discussion has been closed.
Replies
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
[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?