jQuery Datatables sort multiple tables

Question

We have a page with multiple tables on it. All tables are identical (except for the data of course). Is it possible to sort all the tables when I click on a column header of one table. The behaviour should be that if I click on the column header 'Name' (for example) that all tables will be sorted on the same column.

I've tried to do the following:

$(document).on("click", ".myTable thead th", function () {
 var index = $(this).closest("thead").children("tr").find("th").index($(this));

 var allTables = $.fn.dataTable.fnTables();

 for (var i = 0; i < allTables.length; i++) {
  $(allTables[i]).dataTable().fnSort([index, "asc"]);
 }
})

But when I do this I get the following exception:

Uncaught TypeError: Cannot read property 'sSortDataType' of undefined

Answer 1

The parameter for fnSort() had to be a 2 dimensional array because it expects an array which contains the sorting for all columns you would like to sort including the sort option for the column. Like this: $(allTables[i]).dataTable().fnSort([[index, "asc"]]);