Use rowCallBack with moment.js

krizen

Hello,

Sorry if that's not clear, I'm not a native speaker.

I'm trying to display background-color on a row with rowCallBack and moment.js

If the date in a cell is before the actual date the row get colored.

Is that possible?

Here is what I tried:

$(document).ready(function() {
  var date = moment().format('DD-MM-YYYY') 

  $('#dataTable').dataTable({
    retrieve: true,
    "rowCallBack": function(nRow, data, index){
      if (moment(data[5]).isBefore(date)) {
        $('td:eq(5)', row).css('background-color', 'red')
      }
    }
  })
});

kthorngren

You have nRow in your function but row in this $('td:eq(5)', row).css. I think they need to be the same.

Kevin

krizen

Yes I was trying fnRowCallback before, my bad.

It's still not working.

Do I need to override css or something?

allan

It needs to be rowCallback (no capital b). Javascript is case sensitive.

If that doesn't work, we'd probably need a link to the page showing the issue so it can be debugged.

Allan

krizen

Thanks for your answer. I need to pay more attention to details.

It's still not working so here is my code with a simplified datatable:

http://codepen.io/tifennprd/pen/wgQoVV

kthorngren

Your code link isn't working for me. I get the following error when trying to run the page:
Uncaught ReferenceError: jQuery is not defined

Datatables is not being initialized because of not finding jQuery. Do you have the jQuery JS being loaded?

Kevin

krizen

I linked the following scripts in the pen settings:

https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js
https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.js
https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js

Sorry, it's the first time I try to share a pen, I'm working in a local environment.

kthorngren

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
This needs to be loaded before the other JS. The other scripts won't work if jQuery is not loaded first.

Kevin

krizen

In my source code I linked the differents scripts in the good order.

I didn't pay attention here because my jQuery function "hideInactives" was already working with a condition using moment.js (that's weird but I dont know how codepen includes work) :

if(moment($rowValue).isBefore(date))

I edited my pen, now dataTable style is applied but the following code is still not working:

$('#dataTable').dataTable({
    retrieve: true,
    "rowCallback": function(row, data, index){
      if (moment(data[2]).isBefore(date)) {
        $('tr:eq(2)', row).css('background-color', 'red')
      }
    }
  })

kthorngren

I've not used moment before and not sure how to compare dates with it. However you do need to change your line setting the CSS to:
$('td:eq(2)', row).css('background-color', 'red')
Change tr to td.

You can change your if statement or remove it to validate the CSS setting. Someone more familiar with moment.js may be able to help with the comparison.

Kevin