Conditional Formatting

trojahn

Hello,

I'm using dataTables to display the results of a ping test on several IPs. The columns are IP, response time, packet loss, etc... This is working already.

What I'm now trying to do is conditionally format a row or even a cell, based on the packet loss... Green for 0% and full red for 100%.

I'm starting the table like this:
$('#pingTable').dataTable({
'bJQueryUI': true,
'aaSorting': [[5, 'desc']],
'aoColumnDefs': [
{'sClass': 'right', 'aTargets': [2,3,4]},
{'sClass': 'right loss', 'aTargets': [5]}
]
});

Notice I add a "loss" class for the packet loss cells. This does nothing, it's just so I can select them with jQuery later, like this:
$('.loss').each(function() {
$(this).attr('style', 'background: '+percent2rgb($(this).text())+';');
});

The percent2rgb is just a function that returns me a string like "rgb(10%, 90%, 0%)", depending on the percentage I pass to it...

So, this works perfectly for the data that is already showing... But if the data is paged, the subsequent pages are shown with their original format...

Is there a callback for page changes events where I could stick that little hack and change the colors on every page change?

trojahn

Well, not the coolest solution but:


$('.loss').each(function() {
$(this).attr('style', 'background: '+percent2rgb($(this).text())+';');
});
$('#pingTable_next').click(function() {
$('.loss').each(function() {
$(this).attr('style', 'background: '+percent2rgb($(this).text())+';');
});
});
$('#pingTable_previous').click(function() {
$('.loss').each(function() {
$(this).attr('style', 'background: '+percent2rgb($(this).text())+';');
});
});