In my table I want a row to highlight as the user mouses over it. For the first page it works great. However, it doesn't work for the other pages. This is my code:
[code]oTable=$("#"+id).dataTable({
"bJQueryUI": true,
"aLengthMenu": [[-1,10, 25, 50], ["All",10, 25, 50]],
"iDisplayLength": defaultLength,
"aaSorting": [[0,'asc']],
"bStateSave": true,
"fnDrawCallback": function() {
if(tableSettings) {
tableDisplayLength=tableSettings.iDisplayLength
}
$("#"+id+" tr:even").css("background","#dedede")
},
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "/adex/mvc/public/swf/copy_csv_xls_pdf.swf"
}

})
tableSettings=oTable.fnSettings()
$("#"+id+" tr:even").css("background","#dedede")

$("#"+id+" tbody tr").each(function(){
$(this).mouseover(function(){
color=$(this).css("background-color")
$(this).css("background-color","#80C7F9");
}).mouseout(function(){
$(this).css("background-color",color);
});
});
[/code]

I tried adding
[code]
$("#"+id+" tbody tr").each(function(){
$(this).mouseover(function(){
color=$(this).css("background-color")
$(this).css("background-color","#80C7F9");
}).mouseout(function(){
$(this).css("background-color",color);
});
});
[/code]
to "fnDrawCallBack" but it really messed things up. As I moused off a row it didn't return to the previous background color.

Anyone have a solution or idea?