[SOLVED] FixedHeader column widths don't match cloned header from table
[SOLVED] FixedHeader column widths don't match cloned header from table
raddevon
Posts: 15Questions: 0Answers: 0
I'm using DataTables on my site with FixedHeaders. I can hide the fixed headers, and the original column headers are the proper width, but the fixed headers seem to be a uniform width. I have tried this code at the end of my JavaScript to try to force the FixedHeaders to update, but it doesn't seem to help.
[code]
var ticketHeader = $.fn.dataTableExt.FixedHeader( ticketTable );
this.fnAdjustColumnSizing(true);
ticketHeader.fnUpdate();
[/code]
Here are the real headers after hiding the fixed headers:
http://i.imgur.com/3TvET.png
Here are the fixed headers:
http://i.imgur.com/89EQZ.png
I've setup a DynDns in case a live example is needed.
http://raddevon.dyndns.tv:8000/ticket/
Thank you in advance!
[code]
var ticketHeader = $.fn.dataTableExt.FixedHeader( ticketTable );
this.fnAdjustColumnSizing(true);
ticketHeader.fnUpdate();
[/code]
Here are the real headers after hiding the fixed headers:
http://i.imgur.com/3TvET.png
Here are the fixed headers:
http://i.imgur.com/89EQZ.png
I've setup a DynDns in case a live example is needed.
http://raddevon.dyndns.tv:8000/ticket/
Thank you in advance!
This discussion has been closed.
Replies
I've also tried another fixedheader solution (http://jsfiddle.net/jmosbech/stFcx/) which works beautifully in terms of column widths but breaks the sorting.
If I could get DataTables FixedHeaders to clone the original columns properly, it would be perfect. If I could get the other script to support DataTables sorting, that would be perfect. Either way, I want to both have and eat the cake!
Thanks for your time.
FixedHeaders is apparently broken for automatic column widths. These must be disabled for your table or else the cloned headers will not properly copy the widths of the columns. Include this in your table definition:
[code]...
"bAutoWidth": false,
...
[/code]
You may also want to then define column widths unless each column needs to be a uniform width. Example:
[code]
"aoColumns" : [
{ sWidth: '50px' },
{ sWidth: '100px' },
{ sWidth: '120px' },
{ sWidth: '30px' }
]
[/code]
I found the solution on StackOverflow.
http://stackoverflow.com/a/640910/800492
At first it didnt solve the problem for me but when i updated to the latest version of datatables (1.9.3.dev had 1.9.1 of May) it finally aligned correctly.
before the fix and solution the cloned header would have 1 pixel more per field.