Issue in footable while adding dynamic data

Answer 1

'Footable' works great with 'jQuery Mobile'. I will explain its usage with my code snippets.

Footable initialization,

function initFootable() {
    $(function () {
        $('.footable').footable({ //.footable is my class for table
            breakpoints: {
                phone: 480, //Breakpoint width for phones
                tablet: 1024 //Breakpoint width for tablets
            }
        });
    });
}

I am using jQuery AJAX call to get new table data and add them to the table using templating method. I am using handlebars.js for templating. (Remember, this templating method is not compulsory. You can use your own methods to append new rows to your table.)

So, after you have updated new data to the table, you need to trigger footable for re-initialization. Here is the code snippet,

function updateFootable() {
    var paramTable = $('.footable');
    paramTable.footable();
    paramTable.trigger('footable_initialize'); //Reinitialize
    paramTable.trigger('footable_redraw'); //Redraw the table
    paramTable.trigger('footable_resize'); //Resize the table
}

All triggers here are not necessary. Check and confirm calling which trigger is just enough for you, as according to the issue you are having with re-initialization/redrawing/resizing.

That's it, you won't be having any problem with using footable with jQuery Mobile now.

IMPORTANT: However you must be careful while calling updateFootable(), if the div containing the table, or the page containing the table is hidden, then the table won't be responsively resized. You must make sure that the table is visible while you are calling for its update.

Links:

Here is the doc for footable triggers - http://fooplugins.com/footable/demos/triggers.htm#docs

Make sure to go through footable docs - http://fooplugins.com/footable-demos/