| ID | First Name | Last Name | Job Title | DOB | Status |
|---|---|---|---|---|---|
| 2 | Isidra | Boudreaux | Traffic Court Referee | 22 Jun 1972 | Active |
| 3 | Shona | Woldt | Airline Transport Pilot | 3 Oct 1981 | Disabled |
| 1 | Granville | Leonardo | Business Services Sales Representative | 19 Apr 1969 | Suspended |
| 8 | Easer | Dragoo | Drywall Stripper | 13 Dec 1977 | Active |
| 4 | Maple | Halladay | Aviation Tactical Readiness Officer | 30 Dec 1991 | Suspended |
| 5 | Maxine | Woldt | Business Services Sales Representative | 17 Oct 1987 | Disabled |
| 6 | Lorraine | Mcgaughy | Hemodialysis Technician | 11 Nov 1983 | Disabled |
| 9 | Lizzee | Goodlow | Technical Services Librarian | 1 Nov 1961 | Suspended |
| 10 | Judi | Badgett | Electrical Lineworker | 23 Jun 1981 | Active |
| 7 | Lauri | Hyland | Blackjack Supervisor | 15 Nov 1985 | Suspended |
Check out the getting started demo to see how to setup FooTable.
You simply need to include the sorting add-on javascript file to make your table sortable:
<script src="path_to_your_js/footable.sort.js" type="text/javascript"></script>
Sorting of columns is done using FooTable's built-in parsers, which are defined in the default options. The parsers first look at the data-value attribute of a cell, and if there is no data-value attribute, then the .text() of the cell is used. Sorting is done using text-comparisons.
To sort numeric data, you must specify that the column is data-type="numeric"
To sort dates, you must specify that the column is data-type="numeric" and also specify a data-value value for each cell, which can be either the date value in ticks or the unix timestamp value, e.g. <td data-value="500874333932">15 Nov 1985</td>
You can disable sorting for a table by adding the data attribute data-sort="false" to the table.
You can disable sorting for specific columns by adding the data attribute data-sort-ignore="true" to the column header definition.
You can sort a table automatically when the FooTable is initialized by adding some data attributes to your columns:
data-sort-initial="true" will automatically sort the column when the FooTable is initialized.
data-sort-initial="descending" will automatically sort the column in descending order when the FooTable is initialized.
<table class="table demo"> <thead> <tr> <th data-type="numeric" data-sort-initial="true"> ID </th> <th> First Name </th> <th data-sort-ignore="true"> Last Name </th> </tr> </thead>
You can also programmatically sort your table:
$('.sort-column').click(function (e) {
e.preventDefault();
//get the footable sort object
var footableSort = $('table').data('footable-sort');
//get the index we are wanting to sort by
var index = $(this).data('index');
//get the sort order
var ascending = $(this).data('ascending');
footableSort.doSort(index, ascending);
});
If you do not pass a sort order, it will toggle whatever the current sort order is.