Fixedheader not working with multiple Datatable on single page

priyapoojari

Hi , In my project I am using Datatable . Every page have three to four tables and I want fixed header for every table. As only current active or visible table's header will have fixed header

I had tried with static html table it is working but it is not working with dynamic json binding
**Current Issues **
1) After Datatable is binded the fixed header doesn't get applied , It get applied If I click on any event button
2) The last binded header is getting fixed for all the data table
3) Even the header is not getting properly aligned with table horizontal![] (img has been attached )
(https://datatables.net/forums/uploads/editor/xt/b4mf6q1bqmg4.png "")
scroll

** Here the code which I am using **
_
$('#tableID').dataTable({
fixedHeader: {
header: true
},
data: JSONDATA,
"aaSorting": [],
"columns": currentcolumns,
"columnDefs": currentcolumnsdef,
"destroy": true
});
$('#tableID').dataTable().fixedHeader.adjust();_

allan

Thanks for your question - however, per the forum rules can you link to a test case showing the issue please. This will allow the issue to be debugged.

Information on how to create a test page, if you can't provide a link to your own page can be found here.

This example shows that it should work with multiple tables.

Thanks,
Allan

priyapoojari

Hi Allan , Thanks for Helps , This is working in a static pages

But when I am creating a dynamic pages and adding datatables to it. It's not working

So for this feature I made it little customized for me by adding a static hidden table in which I cloned the thead with closet top offest and appending it to the table. Once the thead is cloned the table is visible and fixed on top

allan

Call the fixedHeader.adjust() method when you change the structure of the page on any existing tables ($.fn.dataTables.tables()). That will allow DataTables to recompute the values for where the header should be fixed.

Allan

TLeM4

Hi Allan, the fixedHeader.adjust() is a great idea to fix this kind of issue.
However, as we can encounter similar issue easily, it might be a good idea to find another solution like add an even just before header display. I explain :
1. On your example page, just try to add Show 5 entries option, and make this default. Then after page load any upper length choice on first table will create similar bug with second table.
2. Also with serverside activated, this behavior happen at every page load if the first table is the last to finish its loading.

Thanks for help,
Thomas