Coloring the rows dynamically using Jquery after datatables is initialized

ishanjain

I have implemented datatables on a table in which some rows should have a different background color than others, identified by a css class. Also, i would like to change the background color of a whole row whenever the pointer is hovered over it. For this i am using the following code.

[code]
$(document).ready(function() {
oTable = $('#mytable').dataTable({
"bJQueryUI" : true,
"sPaginationType" : "full_numbers",
"fnRowCallback": function() {
// Assigning colors to inactive rows
$('tr').each(function(){
if ($(this).hasClass('inactive')) {
$(this).css('background','#fccfcf');
$(this).find('.sorting_1').each(function() {
$(this).css('background','#fccfcf');
});
}
});},
"aoColumns" : /*3 column table*/ [{"bSearchable" : false,"bSortable" : false},null,null]
});

// Dynamically binding hover function to change color and pointer on mouse hover
oTable.$('tr').hover(function() {
previousBackground = $(this).css('background-color');
$(this).css('background-color','#e2ebff');
$(this).find('.sorting_1').each(function() {
$(this).css('background','#e2ebff');
});
$(this).css('cursor','pointer');
},function(){
$(this).css('background-color',previousBackground);
$(this).find('.sorting_1').each(function() {
$(this).css('background',previousBackground);
});
});
});
[/code]

On first load, the table gives the desired result. However when i sort any column, everything falls apart. Some columns display background colors properly, some displays only partially. How can i change the background colors without letting the sorting classes affect it??