First Name | Last Name | Status | ||
---|---|---|---|---|
Isidra | Boudreaux | Active | ||
Shona | Woldt | Disabled | ||
Granville | Leonardo | Suspended | ||
Easer | Dragoo | Active | ||
Maple | Halladay | Suspended | ||
After you have initialized a FooTable, you might need to "reset" it. One reason could be that you are changing the columns in the table after an AJAX call. In this case you would need to call the reset method of FooTable:
$('.footable').data('footable').reset();
In this demo, I reset the FooTable, then add a column onto the table structure, and then initialize FooTable again afterwards:
$('.reset').click(function (e) { e.preventDefault(); extraCols++; $('table').data('footable').reset(); //Add a new column into the table header $('table thead tr').append('</tr><th data-hide="phone,tablet">Column ' + extraCols + '</th>'); //add data into the table for the new column $('table tbody tr').each(function(i) { $(this).append('<td>'+ extraCols + '.' + i +'</td>'); }); //fix the colspan of the footer to cater for the new column $('table tfoot tr td').attr('colspan', 5+extraCols); $('table').footable(); });