Use rowCallBack with moment.js
Use rowCallBack with moment.js
krizen
Posts: 6Questions: 2Answers: 0
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')
}
}
})
});
This discussion has been closed.
Answers
You have
nRowin your function butrowin this$('td:eq(5)', row).css. I think they need to be the same.Kevin
Yes I was trying fnRowCallback before, my bad.
It's still not working.
Do I need to override css or something?
It needs to be
rowCallback(no capitalb). 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
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
Your code link isn't working for me. I get the following error when trying to run the page:
Uncaught ReferenceError: jQuery is not definedDatatables is not being initialized because of not finding jQuery. Do you have the jQuery JS being loaded?
Kevin
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.
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
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) :
I edited my pen, now dataTable style is applied but the following code is still not working:
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
trtotd.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