Datatable not showing header after displaying a hide table

jacloud

Hello,

I have a table in my html page:

<

table id="mainTable" class="table table-striped center" style="display:none"> when the table is loaded I show them with:

fnInitComplete: function () {
$('#mainTable').show();
}

But header is not visible, i cheked the html and it generate another table without id that constains the style="display:none" for the header.

kthorngren

Your code snippet works here:
http://live.datatables.net/riquyato/1/edit

Please update the test case to show the issue so we can help debug. Or post a link to your page.

Kevin

jacloud

I update a demo with the problem.

live.datatables.net/powawijo/1/edit

kthorngren

Perfect, thanks. Its because of scrollX. scrollX creates a clone of the header in order for scrolling to work. I guess since its hidden it clones nothing. You will probably be better off hiding a div that contains the table then showing that:
http://live.datatables.net/rehuloka/1/edit

If the columns don't align correctly then you might also need to add columns.adjust() to initComplete after the show() method to recalc the column widths.

Kevin

jacloud

Hello,

Thanks for the answer, now I can see the header as you say but the column size are wrong so I tried with the method adjust but it still wrong.

I have a hidden column so i update the demo is easy to see if you have only two view for example html and output and reload the page.

live.datatables.net/rehuloka/5/edit

kthorngren

The problem is FixedHeader is not compatible with the Datatables scrolling features. From the FixedHeader docs:

Please note that FixedHeader is not currently compatible with tables that have the scrolling features of DataTables enabled (scrollX / scrollY). Please refer to the compatibility table for full compatibility details.

Kevin