simple solution for "FixedHeader column headers not changing on window resize"

ckinsella

The thread http://datatables.net/forums/discussion/comment/42899 is currently closed so posting workaround here.

In my project I'm using FixedHeader 2.1.0-dev (GitHub Jul 20, 2013 https://github.com/DataTables/FixedHeader/tree/5bee910f84964db943e6377030fa223f5dafd651/js) with bootstrap 3.0.3 on multiple, non-DataTables tables (only using FixedHeader and not DataTables in this implementation).

First I added a new "table-fixed-header" class to the all the tables needed.

My table tags are simply:
[code]

[/code]

My script:
[code]
var fixedHeaders = [];
$('.table-fixed-header').each(function () {
fixedHeaders.push(
new FixedHeader(this, {
'offsetTop': 51 // offset for my bootstrap .navbar-fixed-top
})
);
});

$(window).resize(function () {
for (var i = 0; i < fixedHeaders.length; i++) {
fixedHeaders[i]._fnUpdateClones(true); // force redraw
fixedHeaders[i]._fnUpdatePositions();
}
});
[/code]

I tried to use the public fixedHeaders[i].fnUpdate() but that didn't redraw/resize the FixedHeaders. So I'm just calling the 'private' methods which fnUpdate() calls but with _fnUpdateClones(true) instead of _fnUpdateClones().

Shrug, maybe there is a better way to do this, but this works just fine, is super simple, and requires zero modifications to the FixedHeader.js.

Note that I haven't tested IE8 yet.

max255

Thanks! =)