sScrollX and retrieving the dataTable object don't play well together

tedkalaw

Hey Allan,

Currently, I have sScrollX enabled. However, if I attempt to retrieve the dataTable object using the .dataTable() method, a new datatable instance is inserted into the DOM. The following reproduces my issue:

[code]
$(document).ready(function(){
$('.datatable').dataTable({
sScrollX: "100%"
)};

var testTable = $('.datatable').dataTable();
});
[/code]

I get the error:
[quote]
DataTables warning: Cannot reinitialise DataTable.

To retrieve the DataTables object for this table, please pass either no arguments to the dataTable() function, or set bRetrieve to true. Alternatively, to destory the old table and create a new one, set bDestroy to true (note that a lot of changes to the configuration can be made through the API which is usually much faster).
[/quote]

Thanks!

allan

When you enable scrolling DataTables splits the table up into multiple parts (in order to have the header, body and footer all scrolling as expected).

For example:

[code]
$(document).ready(function(){
alert( $('.datatable').length );
$('.datatable').dataTable({
sScrollX: "100%"
)};
alert( $('.datatable').length );
});
[/code]

You should get 1 then 2 or 3 (depending on your table setup).

So what needs to be done is to use a more selective selector in the second case. Or to store a reference to the original returned object.

Allan