change css row with fnRowCallback

carlosaviles

Hello. Allan has a good example to add a css to an element. I would like to be able to do the same to highlight or change the css of the row:
[code]$(document).ready( function() {
$('#example').dataTable( {
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
// Bold the grade for all 'A' grade browsers
if ( aData[4] == "A" )
{
$('td:eq(4)', nRow).html( 'A' );
}
}
} );
} );[/code]

any idea about it? Somebody knows an example in the documentation? I am using it with the editor Display controllers example

I have tried this too:
[code] var table = $('#example').dataTable( {
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
if(aData[1]=="fjgj"){
nRow.className = "hell";
}


return nRow;
},
[/code]

GregP

Hm, I just tried it and although I failed at first (typo!) it seems to work, actually. So, there's something wrong either in your conditional (try alerting aData[1]?) or in the CSS; are you sure "hell" isn't being added and it just doesn't do anything because of other CSS?

allan

Hi carlosaviles,

I see your Editor trial is over. How did you get on with it?

Regarding your problem described above, it would be very helpful if you could link to the page in question so we can debug it.

Regards,
Allan

carlosaviles

Hi Allan. I am testing in localhost. I can´t test it without license? Am I doing something wrong? If yes, I will stop coding.

allan

If you are using Editor, regardless of the environment it requires a license outside the 15 day trial period. If you require longer to continue evaluating Editor, please do let me know.

Regards,
Allan

carlosaviles

Hello Allan. Thanks for your response. I would like to continue evaluating Editor for this week. Thanks a lot and excuse me.

carlosaviles

Hi Greg. When using this load the css, but only change the cell background, so I don´t understand why don´t work the code above:
[code]
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
if ( aData["engine"] == "ggg" )
{

$('td:eq(4)', nRow).addClass( 'hell' );
}
return nRow;
}
[/code]

allan

Thank you for letting me know. I've updated your account to extend the trial license.

Regarding your query about fnRowCallback, I'd suggest you try:

[code]
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
if ( aData["engine"] == "ggg" ) {
$(nRow).addClass( 'hell' );
}
}
[/code]

Note you don't need to return `nRow` any more (so I've dropped it above).

Allan

carlosaviles

Thanks Allan.

I have test your code and but it is not working. I have tested too without results:
[code]
$('td', nRow).closest('tr').css('background-color', 'blue');[/code]
onl works this but in a cell only, not the row:

[code]
$('td:eq(4)', nRow).addClass( 'hell' );
[/code]

this is my full code based in your example:

[code]
var Editor = $.fn.dataTable.Editor;
Editor.display.details = $.extend( true, {}, Editor.models.displayController, {
"init": function ( dte ) {
// No initialisation needed - we will be using DataTables' API to display items
return Editor.display.details;
},

"open": function ( dte, append, callback ) {
var table = $(dte.s.domTable).dataTable();

// Close any rows which are already open
Editor.display.details.close( dte );

// Call fnOpen on the DataTable
table.fnOpen( dte.s.editRow, append, 'DTE_EditorDetails' );
table.fnUpdate( '', dte.s.editRow, 0 );

if ( callback ) {
callback();
}
},

"close": function ( dte, callback ) {
var table = $(dte.s.domTable).dataTable();
var openRows = table.fnSettings().aoOpenRows;

// Call fnClose on the DataTable
if ( openRows.length > 0 ) {
var openRow = openRows[0].nParent;

table.fnClose( openRow );
table.fnUpdate( '', openRow, 0 );
}

if ( callback ) {
callback();
}
}
} );


$(document).ready(function() {
// Create the form
var editor = new $.fn.dataTable.Editor( {
"ajaxUrl": "assets/php/browsers.php",
"domTable": "#example",
"display": "details",
"fields": [
{
"label": "Browser:",
"name": "browser"
}, {
"label": "Rendering engine:",
"name": "engine"
}, {
"label": "Platform:",
"name": "platform"
}, {
"label": "Version:",
"name": "version"
}, {
"label": "CSS grade:",
"name": "grade"
}
]
} );

// DataTables init
var table = $('#example').dataTable( {
/*"fnRowCallback": function( nRow, aData, iDisplayIndex ) {

if ( aData["engine"] == "ggg" )
{
/*$('td', nRow).closest('tr').css('background-color', 'blue');
$('td:eq(4)', nRow).addClass( 'hell' );
}
return nRow;
},


"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
if ( aData["engine"] == "ggg" ) {
$('td', nRow).closest('tr').css('background-color', 'blue');
}

},

"oLanguage": {
"sLengthMenu": "",
"sZeroRecords": "Nothing found - sorry",
"sInfo": "Showing _START_ to _END_ of _TOTAL_ records",
"sInfoEmpty": "Showing 0 to 0 of 0 records",
"sInfoFiltered": "(filtered from _MAX_ total records)"
},
"aaSorting": [[ 1, 'asc' ]],

"sAjaxSource": "assets/php/browsers.php",
"aoColumns": [
{
"sClass": "open_close",
"bSortable": false,
"bSearchable": false,
"sDefaultContent": ''
},
{ "mDataProp": "browser" },
{ "mDataProp": "engine" },
{ "mDataProp": "platform" },
{ "mDataProp": "version", "sClass": "center" },
{ "mData": "grade", "sClass": "center","mRender": function ( data, type, full ) {
return '';
} }
]
} );

$('#example tbody').on('click', 'td.open_close', function () {
var tr = this.parentNode;

if ( table.fnIsOpen( tr ) ) {
editor.close();
}
else {
editor.edit(
tr,
'Edit row',
[
{
"className": "delete",
"label": "Delete row",
"fn": function () {
// Close the edit display and delete the row immediately
editor.close();
editor.remove( tr, '', null, false );
editor.submit();
}
}, {
"label": "Update row",
"fn": function () {
editor.submit();
}
}
]
);
}
} );
} );
[/code]
[/code]

carlosaviles

Ok! I solved it:

[code]

$('td', nRow).css('background-color', 'blue');

[/code]


Thanks a lot Allan!! :-) Also have you noticed the bug about the pagination in your editor Display controllers example?

GregP

Carlos, if it didn't change the entire row by affecting nRow directly (rather than all TD inside of nRow as per your working example) then it was just a matter of CSS specificity. You must have already had something styling the cells that had priority over the row styles. :-)

If doing it at the cell level works for you, though, great!

Allan: no more need to return nRow? I've got a lot of files to update... not that it matters; they'll just go out into the void... ;)

carlosaviles

thanks Greg for your help. I added !important and works fine now :-)