Fixed Header Redraw on Resize of Window

mtrayn01

Hi Allan,

Sorry to bug you again with an issue, hopefully this is my last problem to resolve.

I'm having a hard time finding a way to redraw the column headings when using Fixed Headers, when resizing the browser window. The headers remain in their original width until I force a refresh of the screen, or change the order of the columns.

I have tried the fixes suggested in the following two posts but have not been successful.

http://datatables.net/forums/discussion/1289/changing-header-size-and-with-fixedheader

http://datatables.net/forums/discussion/19124/simple-solution-for-fixedheader-column-headers-not-changing-on-window-resize

Any chance you could take a look at my site (I sent a link in a PM for the last issue I had) when you get time?

Many thanks,

Mark T

mtrayn01

PS - Here is the debugger code okikel

mtrayn01

I thought I fixed the problem, however it turns out I just broke the fixed header functionality, which in turn fixed the header resizing.

Is there an option I'm missing to allow the redraw on window resize?

mtrayn01

Also, how would you suggest to speed up the loading of the datatable?

The data is coming from an XML source file and the datatable is defined within an XSL stylesheet.

I tried the responsive, deferred and server side options, but these look to be only useful for AJAX queries.

The ideal solution would show the table header and a message "Loading" within the table while the data is processing/downloading.

abalfaro

Not sure if you already figured it out mtrayn01, but I found a solution to this. Apparently the DataTables sets column widths to fixed amounts once it figures out the contenth width. So when you resize the window, it leaves it to that set width.

Here's what I did:

$(window).resize(function () { $(".sorting").width(""); //This is the class it sets to each < th > $(".myTableClass").width("100%"); //Class I set to the table for this. An id won't work. $(".dataTables_scrollHeadInner").width("100%"); // Class of div added by DataTables, contains the header table. });

This should work because it sets the width back to 100% and lets the html itself handle the widths. In my case, I have different size contents in my cells. So what I did was play around with the with the sizes and figured out a percentage that would work on each column. I added an "id" to each <th> and then I set the width in the CSS:

#pmth1 { width: 5.34% } #pmth2 { width: 7.31% } #pmth3 { width: 5.04% } #pmth4 { width: 5.08% } #pmth5 { width: 8.51% } #pmth6 { width: 6.93% } #pmth7 { width: 6.31% } #pmth8 { width: 8.37% } #pmth9 { width: 9.27% } #pmth10 { width: 22.47% } #pmth11 { width: 7.28% } #pmth12 { width: 7.89% }

When you run the $(".sorting").width(""); all widths will default to the CSS percentages. To top it off I set the same percentages on the DataTable so that it applies them when it loads:

$('#myTableId').DataTable({ columns: [ { "width": "5.34%" }, { "width": "7.31%" }, { "width": "5.04%" }, { "width": "5.08%" }, { "width": "8.51%" }, { "width": "6.93%" }, { "width": "6.31%" }, { "width": "8.37%" }, { "width": "9.27%" }, { "width": "22.47%" }, { "width": "7.28%" }, { "width": "7.89%" } ] });

I really hope this helps. I know I spent more than enough time researching this.

holdencreative

In case this is helpful - https://datatables.net/forums/discussion/26578/solution-scrollable-vertical-and-horizontal-responsive-datatables-via-flexbox#latest