Sort Callback

sdkester

Hi all,

I've got multiple tables on a page and I'm trying to make it so that when one of them is sorted, the others on the page are sorted too.

I can't seem to find a onSort callback or figure out how to listen for and bind an event/function to the sort.

Any insight appreciated.

Thank you!

- Shaun

sdkester

Hi all,

Update...

I've bound a function to fnDrawCallback, but it occurs both on init and sort. Any tips to limit it to just sort?

TIA,

Shaun

allan

Hi Shaun,

An intriguing question. As you state there is no callback function for 'onSort', other than the draw callback, which is global. I think there are a couple of possible solutions:

1. You could use the draw callback to interrogate the settings in the table and see if the sorting has changed since the last sort (this is quite an attractive option since all tables will be sorting in the same manner, so the small callback would apply to all and only one state would need to be saved).

2. Unbind the event listeners that DataTables applies to the TH elements and then apply your own (once the table has initialised). Your own event handler could then use the fnSort() API function - this is probably fairly easy to achieve with single column sorting, a bit of a nightmare with the multi-column sorting as that logic would need to be re-implemented...

3. Simply alter the DataTables code to call your function whenever _fnSort() is called - of course you would need to do this with each new update...

Depending on your application, 1 seems like the most attractive (there might be other ways I haven't thought of off the top of my head as well...).

Allan

sdkester

Hi Allan,

Thank you very much for getting back to me. I'll evaluate these and give them a shot.

Shaun

sdkester

Hi all,

I thought that I would share the solution that eventually worked for me. If you read the first post, this is what I was trying to do...

I've got multiple tables on a page and I'm trying to make it so that when one of them is sorted, the others on the page are sorted too.

In my document.ready I added this line of code...

$j('table.questions th').live("click", function(){
self._TableSorting();
});

The _TableSorting() function looks like this:

function _TableSorting()
{
var tables = $j('table.questions');
var options =
{
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": true,
"bInfo": false,
"bAutoWidth": false,
"bStateSave": true,
"aoColumns":
[
/* Info */ { "bSortable": false },
/* Number */ { "bSortable": true },
/* Result */ { "bSortable": true },
/* Question */ { "bSortable": true },
/* Type */ { "bSortable": true }
]
}
$j.each(tables, function(i,item){
var oTable = $j(item).dataTable(options);
});
}

Since bStateSave is true, the tables redraw based on the state of the last sort.

- Shaun