Change the background colour based on the value

Glyndwr

I am calculating the start date of an award and then want to change the background colour of the cell based on the person's age (i.e., if they are in the right age group to do the award then colour the cell. I have this:

CSS:

    .bronzeClass tr {
        background-color: #f2f2f2 !important;
    } 

datatables:

      {"data": null, //data is null since we want to access ALL data for the sake of our calculation below
               "render": function(data,type,row) {
                   var DOB = new Date(data.dob);
                   var year = DOB.getFullYear() + 8;
                   var month = DOB.getMonth() + 1;
                   var day = DOB.getDate();

                   var today = new Date();
                   var age = today.getTime() - DOB.getTime();
                   var elapsed = new Date(age);
                   var year = elapsed.getYear()-70;
                   if (year > 7 && year < 9){
                       return ('<div class="bronzeClass">day + "/" + month + "/" + year</div>')
                   }else{
                       return (day + "/" + month + "/" + year);
                   }
                 },
              },

colin

Hi @Glyndwr ,

The best place to do this is in rowCallback, see here. The way you've done it in columns.render means that the search and ordering will be affected to.

Cheers,

Colin

Glyndwr

Hi @colin ,

This works well. However, I have a column that is hidden (archived date) that is positioned to the left of these columns. When the user clicks the "Show Archived" button the button changes to "Hide Archived", Archived members are also displayed and the archived date column is shown. When the archived column is shown the formatting moves to the left. Is there a way round this besides moving the hidden column to the far right?

Kind regards,

Glyn

kthorngren

Are you using something like this in your rowCallback?
$('td:eq(4)', row)

Instead of specifying the columns number (eq(4)) you can use a class, something like this:
$('td.my-class', row)

Then use columns.className to assign the class to the appropriate column.

Kevin

Glyndwr

Hi @kthorngren , I need to colour a specific cell and my reading (and the name) indicated that this colours an entire column.

Kind regards,

Glyn

kthorngren

See if this example helps:
http://live.datatables.net/qatosohu/1/edit

Notice the jQuery selector contains both the class name and the row which is the row passed into the rowCallback

Kevin

Glyndwr

@kthorngren , Ahhh. This is excellent! thank you and @colin .

mc512512

aa