Solved
Conditional Color Coding of Table Cells
Hello, fellow analytics enthusiasts. I have a widget script that color codes table (not pivot) cells based on their values. This code works, but only on the first page of table results. If I switch to page 2, 3, 4 and so-on of the table, the results are not colored. I'm guessing this is because the results don't render until their page is brought into view. What approach can I use to achieve this same result but for all values on all pages of the table?
Thanks in advance!
widget.on('domready', function () {
// conditionally color values in the 10th column of the table
$("tr td:nth-child(10)").css('backgroundColor',''); // reset the color
$("tr td:nth-child(10)").each(function() {
if(parseInt($(this).html()) <= 14) {
$(this).css('backgroundColor','red');
}
if(parseInt($(this).html()) > 14 && parseInt($(this).html()) < 30) {
$(this).css('backgroundColor','yellow');
}
if(parseInt($(this).html()) > 30) {
$(this).css('backgroundColor','green');
}
});
});
DanB ,
One method is to use 'MutationObserver'
Please try this :
widget.on('ready', function(se, ev) { //Observer const elementToObserve = $('.dataTables_scroll .dataTables_scrollBody table tbody', element)[0]; const observer = new MutationObserver(function(e) { for(const m of e) { if (m.type === 'childList') { $("tr td:nth-child(4)").css('backgroundColor',''); // reset the color $("tr td:nth-child(4)").each(function() { if(parseInt($(this).html()) <= 14) { $(this).css('backgroundColor','red'); } if(parseInt($(this).html()) > 14 && parseInt($(this).html()) < 30) { $(this).css('backgroundColor','yellow'); } if(parseInt($(this).html()) > 30) { $(this).css('backgroundColor','green'); } }); } } }); observer.observe(elementToObserve, {subtree: true, childList: true}); })-Hari
