Using AJAX - I can't use an specific TR class

diondu

Hello,

When I use server-side script I can't chose what class the rows will have. The table is always draw with the standard TR class, I'd like then to have class gradeA like I wrote in the code:

[code]



C

pimperish

Hi,

I haven't actually done anything with server-side processing yet, but I'm pretty sure you should be able to use the 'fnRowCallback' to modify your rows: http://datatables.net/usage/callbacks#fnRowCallback.

Hope that helps

diondu

Does anybody knows how can I do what pimperish told using 'fnRowCallback'.

Thanks for the help.

pimperish

all you would need to do is something like:
[code]
$(document).ready(function() {
$('#example').dataTable( {
...
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
$(nRow).addClass('gradeA');
return nRow;
}
} );
} );
[/code]

diondu

Hey pimperish you are the man! It worked again.

Thanks a lot for the help.

online

Hi guys,

Any chance for TD class? I'm using TD class for jeditables and TR class doesn't work for me.

Thanks in advance.

fbas

[code]

$(document).ready(function() {
$('#example').dataTable( {
...
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
$('td:eq(2)', nRow).addClass('gradeA');
return nRow;
}
} );
} );

[/code]

online

Thanks for your tips, but it doesn't work.

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

Pls help.

[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]

fbas

You'll need to call .editable() every time you make a draw because DataTables is making new DOM elements that weren't there the last time you called .editable()

[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;
},
"fnDrawCallback": function () {
$('.class_edit', oTable.fnGetNodes()).editable( 'update.asp', {
indicator : 'Saving...',
tooltip : 'Click to edit...',
...
}
}
} );
$('.class_edit', oTable.fnGetNodes()).editable( 'update.asp', {
indicator : 'Saving...',
tooltip : 'Click to edit...',
...

[/code]

online

Thanks, now I can edit!! But I can't save the changes back to database :(

I used to be able to save the changes back to database, when it's without server side processing & AJAX source, but not I can't.

Tried moving "callback" and "submitdata" out of "fnDrawCallback", but it doesn't help as well.

Any advise?

[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(1)', nRow).addClass('class_edit');
return nRow;
},
"fnDrawCallback": function () {
$('.class_edit', oTable.fnGetNodes()).editable( 'update.asp', {
indicator : 'Saving...',
tooltip : 'Click to edit...',
onblur: 'submit',
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1], false, true );
},
"submitdata": function ( value, settings ) {
return {
"row_id": this.parentNode.getAttribute('id'),
"column": oTable.fnGetPosition( this )[2]
};
},
"height": "14px"
} );
}
} );
} );
[/code]

fbas

what does your debugger say? glancing at your code, it seems like it could work.

online

Found my bug, it's due to server side script error.

Thanks a million for your tips!!!