Missing column headers after data reload

FinancialDeveloper

I'm currently working with DataTables and dynamic data which is delivered via asynchronous request.

Each time my application requests a new data set, I create a new DataTable with the bDestroy option set to true. I am also using Fixed Columns

My issue is that after a few refreshes of the data, a few of the column headers seem to disappear. The actual data columns still appear in the table, but the headers are missing. It seems that around half of the items in the aoColumns array are getting truncated.

The issue is somewhat random; it seems to only occur after the 3rd or 4th reload of the data. My tables are typically around 8 columns, with the number of FixedColumns limited to 2.

I am currently working on making a public demo to reproduce this, but my application is currently on a development server and uses an internal database so this is difficult. For now, here is a snippet of the code I use to re-initialize the table. The variable 'opts' is the JSON array, which I add items to before creating a DataTable from it; I am providing aoColumns with sWidth and sTitle and sClass for each column. Additionally, I am providing sScrollXInner with the total width in pixels of all columns I specify in order to make each column appear exactly as wide in pixels as I specify.

I should also note that the header items are not just invisible, they are actually not present in the DOM with the elements that do appear. I have verified each time this occurs that the JSON array is correctly formed.

[code]
opts.sScrollX = "100%";
opts.bScrollCollapse = true;
opts.bDestroy = true;
opts.bJQueryUI = true;
opts.sPaginationType = "full_numbers";
opts.asStripClasses = ["dt-even", "dt-odd"];
opts.bAutoWidth = false;

$tblDiv.dataTable(opts);

new FixedColumns($tblDiv,
{
"iLeftColumns": opts.iFixedColumns,
"sHeightMatch": "auto",
});
[/code]


Does anyone have any ideas of how to solve this? Or at least what might be causing it?

FinancialDeveloper

I seem to have narrowed this down.

The THs only go missing if the number of columns in the newly delivered JSON data is greater than the number of columns in the old table. If the number of columns in the newly delivered JSON data is less than the previous number of columns, DataTables encounters this error:

[quote]
Cannot read property 'sWidth' of undefined
[/quote]

So it seems that, for some reason, on a dynamic reload of data from a JSON source the column headers are not being updated. Is there some manual intervention needed to make to ensure the column headers are updated correctly? The data columns update just fine.

I have tried calling fnDestroy() on the DataTable object before attempting to fill it with new data to no avail.

kgibson

I found that this code does not currently work as expected, and I think that it is related to your issue:

[code]
var dt = table.dataTable({
"bDestroy" : true,
"aoColumns" : [ {sTitle : "System"}]
});
dt.fnDestroy();
dt = table.dataTable({
"bDestroy" : true,
"aoColumns" : [ {sTitle : "Foo"}, {sTitle : "Bar"}]
});
[/code]

When the second table is built, only 1 column exists (Foo). Also the table no longer reports as being empty.

kgibson

When the table is destroyed (fnDestroy or bDestroy), the "original" table is restored during the destruction process. After the destroy is finished, a bare table with headers and rows remains. If all you started with was "" with the headers and rows were added using datatables, destroy will create a bare table with those headers and rows.

This is fine, however it causes a problem when you attempt to initialize another table on top of it with a greater number of columns. During the initialization, datatables looks at the DOM to see what exists and creates a structure based on the existing DOM table. Then when it actually loops through the aoColumns provided in the initialization, you end up with an out of bounds and an undefined item.

Here's what I've done to work around the above:

[code]
dt.fnDestroy();
$("thead", table).remove();
[/code]

Remove the head.

FinancialDeveloper

Thanks for your reply.

I too solved this a few days ago by simply emptying the entire table before attempting to load new data. Everything is working great now!

max4ever

it works in Firefox on windows but hides columns on mac, dammit

aucon

Just simple problem. Copy this and paste to your css file that corresponds your table.

.dataTables_scrollHead {
height: 37px;
}