FooTable - jQuery plugin for responsive HTML tables

Reset FooTable so you can change the columns that are shown in the table

[Add another column]

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

#### Reset

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

##### Example

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