Change row background color

andrew.bishop

Hi, first off, thank you Allan for the quick response to my last question and for dataTables.

I've got a set of 4 tables on a page that all load data via "sAjaxSource" but now I'm trying to figure out how to set the background of specific rows within that table based on row content.

To go along with the "zero config" example on the dataTables site, I'm trying to set a CSS class of "classX" to a row containing "classX" in the "CSS grade" field. This would be easy enough if I filled out the table then applied dataTables to it, but I'm having dataTables load the data via AJAX. Does this make sense? I hope so.

Any thoughts?

allan

Hi Andrew,

What I would recommend in this case is using fnInitComplete() ( http://datatables.net/usage#fnInitComplete ) which is called once the table has been fully initialised (i.e. once the data is loaded - this is certainly true in 1.5 beta, can't remember about 1.4... there was a bug about that at some point).

At that point you could parse through the information in the settings object and apply the class names to the nodes that you what (oSettings.aoData[].nTr and oSettings.aoData[]._aData[] are the variables that will probably interest you most).

Hope this helps!
Allan

andrew.bishop

Thanks again Allan.

I'm going to make attempts at using what you described. I'm still a bit confused as to how I might could parse through the settings object. Any tips?

allan

Hi Andrew,

fnInitComplete() has one parameter passed to it (I've recently added another for json data, but I don't think it's needed here) - and this parameter is the settings object.

So you can do something like this:

[code]
fnInitComplete: function ( oSettings )
{
for ( var i=0, iLen=oSettings.aoData.length ; i

andrew.bishop

worked great! Thanks for the help!

allan

My pleasure :-).

waol

I understand I should use this function to change background of rows.

Any existing example anyone?

IS there any way to have blank or customized rows and decide colors of specific rows/cells with if statements?

i.e. if $variable > 10 color = red for a specific cell.
or if strings equals "hello" color = green.

Thanks in advance,
Salvo

allan

Hi Salvo,

Do you want to do this in Javascript? Is there any reason you can't do it in PHP. If so, I'd recommend asking in a PHP forum, since the answer is not dependent on DataTables. The answer is yes - and you've basically answered it your self:

if ( $variable > 10 )
echo 'class="red"';
else
echo 'class="green";

But I need to request that the questions in this forum are kept specifically to DataTables :-)

Allan

waol

Hi Allan,

Yes I can do it in PHP, however I asked because my understanding was that all that is in the built table (colors, links, ) are managed and created by datatables. Am I wrong?

waol

Done in PHP.

You rule ;)

allan

DataTables will retain the classes that you give the TR / TD elements, so what you apply in the HTML will still be true when DataTables does it's thing.

Allan

waol

mmmhhhhhh........... it doesn't seem to work,

I mean that when I resort all colors will be messed up.

I think I've seen someone achieving this from datatables itself; am I on a wrong path?

Cheers,
Salvo

allan

Hi Salvo,

Do you mean something like the row background colours that I have in most of my DataTables examples? i.e www.datatables.net ?

If you disable DataTables, do your rows get the correct background colours then? Remember that DataTables will add the classes 'odd' and 'even' for you.

Allan

waol

Hi Allan,

This is what happens with the background colors.

I was able to setup the background color depending on the conditions I needed however 2 main issues:

- When I sort using the column in which I changed the background color; these will be overwritten. I guess it's normal as the columns used for sorting has colors of its own.

-In php I was changing the font color and not the background and was as simple as this below; now I want to change method and assign color to the bg instead of the font, my understanding is that I'm now messing with the way the rows colors are alternate in php and dataTables and the consequence is that when no condition is applied and I expect the default color, it can be not the same from the remaining cells of the same row.
I guess as the others are managed by the odd and even classes and this column is managed by my php lines.

// to alternate bg color
if($color == "#F2F2F2") {
$color = "#FFFFFF";
}
else {
$color = "#F2F2F2";
}

// to give color to fonts depending on value in the cell
if
($timelapsed > $days){
$fcolor = "#FF0000";
}
elseif ($timelapsed > $threedays){
$fcolor = "#FF8040";
}
else {
$fcolor ="#000000";
}


Hope I've been clear

allan

Hi Salvo,

1. The column colour is done through the class classes 'sorting_1' etc. If you load up the DataTables index page ( www.datatable.net ) and shift click to add the sorting on two columns, you will see that I have not added classes for 'sorting_3' - at that point the default sorting is used - this is just the way I've done my CSS).

2. If you are using the colour as a 'style attribute' then it should be displayed at all times - regardless of the classes (style="" always takes precedence). Perhaps it would be an idea to look at how I've done my default styling in the DataTables examples by looking at the HTML and the CSS (through Firebug etc).

Regards,
Allan

waol

Hi Allan,

I'm afraid I'm not understanding how to proceed with.
Do you happen to have an example with similar feature?

Wouldn't be possible to use http://datatables.net/examples/example_row_callback.html
to match the condition and give the background color when this happens?

Cheers,
Salvo

allan

Hi,

Yes, a demo which deals with background colours is on the front page of this web-site :-). Have you poked around with Firebug? It would indeed be possible to use fnRowCallback() to assign colours if you want to go that way. Just read the information to help you decide on a colour and then set the TR's class name.

Allan

Christian Bonato

I'm using dataTables for a messages Inbox.

Here's how I do to assign a bkg colour based on whether the message is new or not :

[code]
var oTable;
var asInitVals = new Array();

$(document).ready(function() {
// INITIALIZE HTML
$('#messagestable_inbox_dynamic').html( '' );

// INITIALIZE TABLE
oTable = $('#messagestable_inbox').dataTable( {

// LOCALE
"oLanguage": {"sUrl": "includes/javascripts/jquery/plugins/datatables/media/language/<? echo($img_folder."_".strtoupper($img_folder)); ?>.txt"},

// OPTIONS
"bAutoWidth": false,
"bLengthChange": false,
"iDisplayLength": 10,
"bStateSave": true,
"aaSorting": [[3,'desc']],

// CHANGE ROW COLOR DEPENDING ON... (THIS COMPARISON PRETTY DIRTY AT THE MOMENT, I WILL CHANGE THIS BY ADDING A NEW COLUMN WITH 'READ'/'UNREAD' VALUES FROM MY MYSQL QUERY, AND MAKE IT HIDDEN/UNSEARCHABLE TO THE END USER)
"fnRowCallback": function( nRow, aaData, iDisplayIndex ) {
if ( aaData[0] == "•" )
{
// testrow IS THE CSS CLASS WITH THE CORRECT background-color
$('td:eq(0)', nRow).addClass( 'testrow' );
$('td:eq(1)', nRow).addClass( 'testrow' );
$('td:eq(2)', nRow).addClass( 'testrow' );
$('td:eq(3)', nRow).addClass( 'testrow' );
}
return nRow;
},

// POPULATING TABLE WITH PHP/MYSQL REQUEST FOR MESSAGES
"aaData": [

// ...

// FETCHING ALL MESSAGES IN PHP, AND AT SOME POINT :
<?php
if ($singlemessagearray['Status'] == "UNREAD")
{
$msgfrom_subject = "".$msgfrom_subject."";
$icon = "•";
}
?>
// ...
[/code]


I came across a situation where the bkg color would not change, because addClass does not overwrite the current assigned class (I guess it could be done with .changeClass).

Christian

waol

Thank you to you both guys.

I'm currently trying to sort out the server_side feature so I'll have the basic done first and will be able to focus on the fancy stuff after that.

I should be able to figure out the background color with your advices. Will let you know.

Cheers,
Salvo