Scrolling datatables create unexpected behavior.

peteruithoven

It looks like I can't retrieve scrolling datatables (setting sScrollY or sScrollX). By retrieving I mean after the table is initiated using the dataTable() to just retrieve the instance.
This is caused because scrolling tables generate a second table. This is the table header and it gets the same classes as the original table.
So when I retrieve the datatable using a class (like $('.dataTable')) I get the "Cannot reinitialise DataTable" error because $('.dataTable') now returns two items. A simple solution is to use always retrieve the second item (using $('.dataTable').eq(1)).
It might be good to investigate the posibility of not coping the classes or warning people about this behavior.

A simple example:
[code]var config = {
sScrollY: "100px"
}
$('.dataTable').dataTable(config);

var dataTableHeader = $('.dataTable').eq(0);
console.log("dataTableHeader: ",dataTableHeader);

var dataTableBody = $('.dataTable').eq(1);
console.log("dataTableBody: ",dataTableBody);

var dataTable = dataTableBody.dataTable();
console.log("dataTable: ",dataTable);
console.log("numRows: ",dataTable.fnGetNodes().length);[/code]

allan

The reason for this is that you have multiple TABLE elements with a .tableTable class after initialising it with scrolling, since DataTables will split your table into two (the header and body). Thus, if you are working with scrolling tables, you will typically want to use IDs to initialise and retrieve the instance as it makes things much easier!

Allan

peteruithoven

Hi Allan,
Thanks for the info, but I actually figured that out (my solution was using .eq(1)).
Using a id is not easy for me because I have multiple datatables, accros tabs, that requere the same behavior. So it's a lot easier when I can just rever to the .datatable in the current tab.