FixedHeader misaligned when table is hidden at start and incorrect width when resizing page

Misiu

I'm trying to add loading animation to my page.
I'm doing that by showing a div with loading image and then fading it out.
but I get weird behaviour with FixedHeader - plugin is added to top left of my page - http://live.datatables.net/ruyucuzu/1/edit

my current workaround is adding FixedHeader when I get ajax result from server - http://live.datatables.net/fizozoke/1/edit

But I must be sure I have only one instance of FixedHeader added to table.
Here comes my first question - can FixedHeader ba a "singleton" so it can be added only once to single table table?
Calling new $.fn.dataTable.FixedHeader(table); multiple times is adding multiple instances one by one, I have this coded, but I thing it's reasonable to have one instance per table.

Second thing is FixedHeader width. Open http://live.datatables.net/fizozoke/1/edit click on column header (to load data) and try to resize Output panel. Observe how FixedHeader isn't resizing correctly.

How this can be fixed?

Misiu

@Allan or anyone - any ideas how to fix that resizing issue?

Misiu

Anyone?

Jamaur

I posted the same issue over here http://datatables.net/forums/discussion/22478/fixed-header-bug#latest

Misiu

@Jamaur see my workaround, I'm initializing FixedHeader when I need it - in my case after I get data from server.
You could try to add FixedHeader when user is switching to tab where DataTables is placed (don't forget to remove it when user change tab to other)

My main issue is misalignment when using with Bootstrap 3.

Jamaur

The problem is that in my working environment ajax toolkit tabs are being used, and no events are available to me from javascript, thus i cannot know if a tab is being closed or shown.

Misiu

Try using is(':visible') like so:

var added = false;
$('.tabsheader_class').on('click',function(){
    if($('#tableId').is(':visible')) {
        // add hixed headers
        added=true;
    } else {
        //remove fixed header if it was added
        if(added) {
            //remove
        }
    }
})

Written without testing, but this should work :) First test is is(':visible') will work.

Jamaur

Thanks I will try it.

Misiu

I need a way to fix issue with FixedHeader when resizing page with Bootstrap 3 - http://live.datatables.net/fizozoke/1/edit
I'll be very grateful for any advices on this.

Misiu

Anyone?