[Docs] fnRowCallback: example incorrect?

Dan

the example code for the callback says it sets the row class, but the actual example appears to alter the html of the :

[code]
$(document).ready(function() {
$('#example').dataTable( {
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
/* Append the grade to the default row class name */
if ( aData[4] == "A" )
{
$('td:eq(4)', nRow).html( 'A' );//alters html, NOT class
}
return nRow;
}
} );
} );
[/code]

I will keep banging at this- I think what I need to do is some sort of
[code]
$().addClass('myClass');
[/code]

I just need to know how to refer to the row... is it "this" ?

allan

Hi Dan,

Thanks for picking up the error in the documentation. I've corrected it now.

The row is passed in as the first argument - in this case 'nRow'. http://datatables.net/usage/callbacks#fnRowCallback . So you can use this to do whatever you would like. My demo code manipulates the HTML of the 5th TD cell.

Regards,
Allan

Dan

Thanks for the clarification!

For the record, I got this to work (adds the class):

[code]
$(document).ready(function() {
$('#example').dataTable( {
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
/* Append the grade to the default row class name */
if ( aData[4] == "A" )
{
$(nRow).addClass('gradeA');

}
return nRow;
}
} );
} );

[/code]

This is a spectacular project- thanks!

online

How can I add class to TD for Ajax aaDATA?

Tried the following, but it doesn't work:
$('td', nRow).addClass('class_edit');

allan

Looks okay to me - can you link to an example which shows it not working please?

Allan

online

Sorry for double posting, cos I found another similar thread @
http://www.datatables.net/forums/discussion/1815/using-ajax-i-cant-use-an-specific-tr-class

I'm using AJAX as data source and trying to set TD class, so that I can use Jeditables for inline editing.

Tried following as well.
[code]
$(document).ready(function() {
var oTable = $('#table_id').dataTable( {
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "select.asp",
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
$('td:eq(2)', nRow).addClass('class_edit');
return nRow;
}
} );
$('.class_edit', oTable.fnGetNodes()).editable( 'update.asp', {
indicator : 'Saving...',
tooltip : 'Click to edit...',
...
[/code]

allan

jEditable doesn't do "live" events though (unless they've changed it recently), so it isn't actually binding to any elements, since at the time it is run, there are no elements of that class to bind to!

I'd suggest moving your jEditable init code into an fnDrawCallback function, which will be called when the elements are available and after fnRowCallback has put what you need in place.

Allan

fbas

As Allan says, use fnDrawCallback. I posted code for this in the other thread of this same topic.

http://www.datatables.net/forums/discussion/1815/using-ajax-i-can039t-use-an-specific-tr-class#Item_9

online

Thanks Allan & FBAS, I'll check it out on the other thread.