Row and column highlighting on AJAX-backed tables

dgilman

I'm using DataTables 1.9.3 and have hacked together this somewhat embarrassing Javascript to allow row and column highlighting. It's based on the example on this page ( http://datatables.net/release-datatables/examples/api/highlight.html ) but adapted for sAjaxSource tables.

Here's the relevant parts of the dataTable configuration:
[code]
$(document).ready(function() {
var tbl = $('#positions_table').dataTable( {
"bPaginate": true,
"sAjaxSource": "/json/positions",
"bFilter": true,
"fnInitComplete": function (conf, json) {
var tbl = $($.fn.dataTable.fnTables(true)).dataTable();
$('td', tbl.fnGetNodes()).hover( function() {
var iCol = $('td').index(this) % some_constant;
var nTrs = tbl.fnGetNodes();
$('td:nth-child('+(iCol+1)+')', nTrs).addClass( 'highlighted' );
}, function() {
$('td.highlighted', tbl.fnGetNodes()).removeClass('highlighted');
});
}
} );
} );

[/code]
some_constant is inserted by the templating code on the server. It's the number of columns.

This code works fine on the first page of the paginated table but doesn't on later pages. It also breaks if you use the filter to cut down to results that aren't on the first page of the table.

Any suggestions on how to get this JS to work everywhere, not just the first page? Also, is there a way to get the dataTable() object out of the args passed to fnInitComplete() instead of using the silly $($.fn.dataTable.fnTables(true)).dataTable();?

EDIT: http://debug.datatables.net/avocez