Highlighting Rows

jcrawford

In one of my tables there is an Enabled column that shows either Yes or No. I would like to have all the Yes rows be a light green color while all the No rows being a faded red color. Is there a way to make this happen?

I checked the examples and all I saw were the hover highlight rows example.

allan

How are you outputting your table? If you are using some sort of server-side process to create it, can't you just add a class to the TR which will be specific to the 'Yes' or 'No'? Otherwise, the best way would just be to parse over the table in the DOM and add the required class(es).

Regards,
Allan

jcrawford

I am using server side however my server side script is outputting the json format not pure html so i am not sure how to get at the rows and check them.

Could you show a simple example of how to get at them through the dom?

jcrawford

This is how i am populating the table.

$script = '
$(document).ready(function() {
$("#example").dataTable( {
"aaSorting": [[ 3, "asc" ]],
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "'.$data_url.'",
"bAutoWidth": false,
"aoColumns": [
{ "bVisible": false },
{ "bVisible": false },
{ "bSortable": false, "bSearchable": false },
null,
null
]
} );
} );
';

allan

I wonder if fnRowCallback() ( http://datatables.net/usage/callbacks#fnRowCallback ) might be the best option for this in combination with server-side processing. It gives you the TR node and the data in the row, so you can do a chick check to see what class should be applied, and then do so.

A wee three line liner might do just the trick:

[code]
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
nRow.className = aData[0 /* or whatever */]=="Yes" ? "class_yes" : "class_no";
}
[/code]
Regards,
Allan

jcrawford

where would i put this in the script that i posted above?

jcrawford

adding it like this, gives the following js alert error
Error: A node was not returned by fnRowCallback

$script = '
$(document).ready(function() {
$("#example").dataTable( {
"aaSorting": [[ 3, "asc" ]],
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
nRow.className = aData[4]=="Yes" ? "enabled_row" : "disabled_row";
},
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "/ispadmin/keyword/repdata/campaign/'.$campaign.'/",
"bAutoWidth": false,
"aoColumns": [
{ "bVisible": false },
{ "bVisible": false },
{ "bSortable": false, "bSearchable": false },
null,
null
]
} );
} );
';

jcrawford

I got it all under control now
thanks Allan that worked perfectly i just had to return nRow;

thanks again

allan

Oh yeah - I always forget about that. Probably not stirctly needed since nodes are passed by reference, but I suppose it allows for you to completely throw the old row away and create a new one...

Either way - sorted now :-)

Allan

krongob

that was great!
thanks a lot guys ;)

daviz

Hello, I'm having some trouble using the trick:

[code]"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
nRow.className = aData[0 /* or whatever */]=="Yes" ? "class_yes" : "class_no";
return nRow;
}[/code]

Although it worked perfectly for me, I missed the "even" and "odd" classes inside the !
Anybody knows how to solve this problem?!

Thanks!

krongob

I think the issue is that you need to assign class to only rows you need to be highlighted. like this:
[code]"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
if(aData[0]=="Yes"){
nRow.className = "class_yes";
}
//please note that there are no else.

return nRow;
}[/code]

iuliandum

Allan, what mode is fast between:

[code]
nRow.className = aData[0]=="Yes" ? "class_yes" : "class_no";
[/code]

OR

[code]
if (aData[0]=="Yes")
$(nRow).addClass("class_yes")
else
$(nRow).addClass("class_no")
[/code]

Is it fast nRow.className ="class" than $(nRow).addClass(''class'') ?

daviz

Thanks a lot krongob, worked perfectly, but now I'm having another problem...
My HTML sctructure is:

[code]
Test
teste.professor@test.com
Professor
10/09/2009

Change User
Active


[/code]

The javascript that i'm using:

[code]"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
if(aData[0] == "Test"){
$(nRow).addClass("off");
}
return nRow;
}
[/code]

I need to find the html below:

[code]
Change User
Active
[/code]

not the :

[code]Test[/code]

[]z

krongob

hi daviz,
glad to hear that it works for you.

Edited:
and about the issue, may be you like to use regular expression like:

[code]"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
if(aData[0].search("expression")>-1){
$(nRow).addClass("off");
}
return nRow;
}[/code]

You will need to replace expression to match the part you like to check with the appropriate regular expression.

daviz

Worked perfectly!!!! Thank you very very much!

nm_alex

Uhm, is there a way to call any other callback that is usually executed in fnRowCallback?
I have the problem, that usually, the rows were highlighted differently depending on the fact if they were odd or even.
Now I added a fnRowCallback. It is applied, but it doesn't show the different coloring anymore.
Do I have to do this myself if I work with fnRowCallback?

edit: here is my callback:
[code]
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
var this_class = "no_change";
if ( aData[4] == "+" ) {
this_class = "this_is_good";
}else if( aData[4] == "-" ) {
this_class = "this_is_bad";
}
nRow.className = this_class;
return nRow;
},
[/code]

edit: got it. I have to *append* the class, not to override the class attribute. Instead of nRow.className = this_class; I now do: nRow.className = nRow.className + " " + this_class;

allan

@iuliandum - Long and short: nRow.className="class" is much faster than $(nRow).addClass(''class''), but it does have it's problems. For example if you already have a class name assigned, then it will be overwritten, but this wouldn't happen with the jQuery version. I tend to think of $(x) as a fairly expensive operation (although it's not too bad!), and it can really reduce little mistakes here and there.

@nm_alex - heh - this follows on perfectly from what I just wrote above. One needs to be careful when accessing .className directly, and jQuery way is a little more flexible and forgiving, but comes at the cost of speed (although in this case we would likely never notice the difference).

Regards,
Allan

jcrawford

just out of curiosity as I do not see it listed on the callback page but is there an equivelent for fnColumnCallback? I ask because I want to apply a style to a column element rather than the row

Basically if the word CREDIT is found in the column the css would make it green or something, if DEBIT then it would make the column red.

I was just looking at the columns sClass stuff and this seems to be what I want just not sure how to make it switch classes, something like this?

[code]
$(document).ready(function() {
$('#example').dataTable( {
"aoColumnDefs": [
{ "sClass": (/* how to reference column here? */ == 5) ? "credit" : "debit", "aTargets": [ 0 ] }
]
} );
} );
[/code]

Thanks,
Joseph Crawford

jcrawford

I got it to work a different way by changing the text color which is a nicer way anyway. However I am not sure this is the best way to accomplish these results. As Allan said above it is faster to use nRow.className = 'blah' than Jquery.addClass(). However in this situation I am not quite sure how to use the nRow.className = 'blah'

[code]
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
/* numbers less than or equal to 0 should be in red text */
if ( aData[2].indexOf('D') == 0 ) {
jQuery('td:eq(2)', nRow).addClass('transactionDebit');
} else {
jQuery('td:eq(2)', nRow).addClass('transactionCredit');
}
return nRow;
},
[/code]

I did try using nRow.className = 'blah' however that changed the entire rows text color and not just the column.