First Name | Last Name | Job Title | DOB | Status |
---|---|---|---|---|
Isidra | Boudreaux | Traffic Court Referee | 22 Jun 1972 | Active |
Shona | Woldt | Airline Transport Pilot | 3 Oct 1981 | Disabled |
Granville | Leonardo | Business Services Sales Representative | 19 Apr 1969 | Suspended |
Easer | Dragoo | Drywall Stripper | 13 Dec 1977 | Active |
Maple | Halladay | Aviation Tactical Readiness Officer | 30 Dec 1991 | Suspended |
Maxine | Woldt | Business Services Sales Representative | 17 Oct 1987 | Disabled |
Lorraine | Mcgaughy | Hemodialysis Technician | 11 Nov 1983 | Disabled |
Lizzee | Goodlow | Technical Services Librarian | 1 Nov 1961 | Suspended |
Judi | Badgett | Electrical Lineworker | 23 Jun 1981 | Active |
Lauri | Hyland | Blackjack Supervisor | 15 Nov 1985 | 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(); });