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 han

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 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');

Answer 3

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');
    });