footable in bootstrap 3 not initializing

Question

the excellent footable plugin I'm trying to integrate in by twitter bootstrap doesn't initialize. That is to say, thank to my firebug inspector, I can see the table is handled by footable plugin but the row I always want to be hidden :

data-hide="all"

are visible. If I change my browser's size, then the table has the behavior I'm expecting it should have at page startup.

I've tryed in firefox/chrome and different jQuery version but still the same !

I've took the simplest footable example to see what was happening but no more luck ! It's said footable is working together with bootstrap out of the box.

I'm loading a huge quantity of scripts on my page using requireJS but not an error around this. I can't understand how the table could be recognized by footable but it's properties not activates !

Thanks for any way of investigation !

EDIT : I've understood the problem comes from my table is in an hidden div at page load (using bootstrap wizard) so adding :

onTabShow: function(tab, navigation, index) {
if(index===3){
        $('.footable').trigger('footable_initialize');
}

}

did the trick :)

Answer 1

It is because fooTable cannot tell the size of the screen when it is in a hidden div/tab.

Use the following jQuery:

$(document).ready(function() { 
    $('.nav-tabs a').click(function (e) {
        //prevents re-size from happening before tab shown
        e.preventDefault();
        //show tab panel
        $(this).tab('show');  
        //fire re-size of footable
        $('.footable').trigger('footable_resize'); 
    });
}); 

Answer 2

You did answer your own question with regards to using the bootstrap wizard. The original question concerns footable. I struggled with it a little, but the solution is simple using the shown.bs.tab event.

Use the following jQuery:

    $('.nav-tabs a').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
    });

    $(function () {
        $('.footable').footable();
    });

    $("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) {
        //fire initialize of footable because the footable plugin only processes tables that are visible
        $('.footable').trigger('footable_initialize');
    });

Answer 3

You answered your own question. The footable plugin only processes tables that are visible. Check the code in footable.js resize() method

 if (!$table.is(':visible')) {
    return;
 } //we only care about FooTables that are visible

So you are correct. Either be sure the tab is fully visible, and all parents are visible or trigger the initialize event which causes footable to reset the table. But perhaps it is better to just reinitialize the table you just made visible.

$('#myFooTable').trigger('footable_initialize');