Finding elements hidden by DataTables.

r0mulus

I'm a bit new to web development so I apologize if I'm a little crazy here... :)

I have a DataTable that I'l loading via sAjaxSource(). I also have some conditional formatting that I would like to apply. The basic table structure looks like this...

[code]




Test Name
Test Time
Status







[/code]

I would like to highlight the status td based on the status. For example, if the test failed I would like the Status td red. I created a function to do most of that formatting for me...

[code]
function Style ()
{

$("tr td:contains('Validated')").each(function () {
$(this).css({
"background-color": "green"
});
});


$("tr td:contains('Failed')").each(function () {
$(this).css({
"background-color": "Red"
});
});

$("tr td:contains('Late')").each(function () {
$(this).css({
"background-color": "Yellow"
});
});
}
[/code]

I simply call the Style function from the fnInitComplete method of the DataTable. Here is where my issue comes in. I refresh the data with fnReloadAjax. Again, I made some changed to that function so it calls Style() after it draws the table. The problem is that, if the users has a filter on the DataTable (such that they are only showing Failed checks) only the elements that are being displayed are being styled.

I'm thinking there is something I can do to the jquery i'm using to find the td's so that i can search the entire lot, not just the ones currently shown on the table.

fbas

datatables makes this easy for you with the fnRender function that you assign to any column.

for your status column you can set it's fnRender to set a css style for failure, and a different css style for success, or whatever else.

here's the example page for fnRender: http://datatables.net/release-datatables/examples/advanced_init/column_render.html
[code]
$(document).ready(function() {
$('#example').dataTable( {
"aoColumnDefs": [
{
"fnRender": function ( oObj ) {
return oObj.aData[0] +' '+ oObj.aData[3];
},
"aTargets": [ 0 ]
}
]
} );
} );
[/code]
in this example, column zero has a custom render function that combines the values of column 0 and column 3 (oObj is passed to your fnRender function and it has an array of the values for every column in that row).

You could use your function to check the value for your column number and based on the value, set a css class or even modify the value directly. in the example below I modify the cell value. this might not be the best idea (if you're sending values back to a database, or maybe it will affect sorting) but gives you the general idea. more sophisticated code will modify the cell's css rather than change the html/text within the cell (background on a span isn't very effective unless you size it to the whole cell.. ?).

[code]
"aoColumnDefs": [
{
"fnRender": function ( oObj ) {
var status = oObj.aData[2];
if (status.toLowerCase() == "failed")
status = "fail";
return status; // make sure to return the value you want in this column, even if not changing it
},
"aTargets": [ 2 ]
}
[/code]

note that oObj.iDataRow is the row number of your cell and oObj.iDataColumn is the column. you could use these in some jquery code to find that cell in the tbody.

r0mulus

That works very great! It looks like it is only rendering the html inside the TD. Any way I can target the TD element surrounding the next? I would love to add a class to the TD element based on whats inside the TD.

fbas

I tried out fnRender and it turns out that fnRender is running while the cells are being created, so you can't get the cell DOM to apply css.

fnRowCallback is called a little later, though, after a row is created, and allows you to do exactly what you want: based on example for fnRowCallback here - http://www.datatables.net/ref
[code]
$(document).ready(function() {
$('#example').dataTable( {
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
switch( aData[2] ) // column 2, status
{
case "Failed": $('td:eq(2)', nRow).css('background-color', 'red' );break;
case "Validated": $('td:eq(2)', nRow).css('background-color', 'green' );break;
case "Late": $('td:eq(2)', nRow).css('background-color', 'yellow' );break;
}
return nRow;

}
} );
} );
[/code]