ScrollX option strips out the table ID

boidy

I've just stumbled onto this bug after scratching my head for the best part of 8 hours. I'm seeing an issue in that when I have scrollX enabled in DataTables, it removes the table id. This doesn't happen with scrollX disabled.

On my table, I have added a class='col_searchable' to some <th> in order to build some column filters. I have then inserted the following above and below the DataTables initialisation:

console.log($(' thead th.col_searchable').parent().parent().parent());

The Console log shows the following:

[table#capture_job_table.table.table-striped.table-bordered.no-margin.text-xs, prevObject: jQuery.fn.init[1], context: document]
[table.table.table-striped.table-bordered.no-margin.text-xs.dataTable.no-footer, prevObject: jQuery.fn.init[1], context: document]

As you can see, the id 'capture_job_table' is present immediately before initialisation, but has been removed afterwards, and like I stated above, it doesn't have this behaviour when scrollX is disabled.

I'm using DataTables 1.10.12 and jQuery 2.1.1 and using Chrome browser Version 52.0.2743.116 m (64-bit).

boidy

As I need to use scrollX, for now I have put in a workaround to capture the table ID as a variable prior to initialising DataTables. After initialisation, I set the ID on the table again before continuing on.

var table_id = $(' thead th.col_searchable').parent().parent().parent().attr('id');
var table = $('#capture_job_table').DataTable( {
...
scrollX: true,
...
});
$(' thead th.col_searchable').parent().parent().parent().attr('id', table_id);

Daywalker

i have the same problem Y_Y , but repaired the same way, thanks

allan

http://live.datatables.net/coxofuqu/1/edit

Its still there - its just that the table is split into two parts (or three if you have a footer) - the header the body and the footer. It has to be done that will to allow horizontal and vertical scrolling. Since the ID must be unique, only one of those tables can retain the id, and the body does that.

Use the API to get the header and body elements: table().head() and table().body().

Allan