ID | First Name | Last Name | Status |
---|---|---|---|
1 | Granville | Leonardo | Suspended |
2 | Isidra | Boudreaux | Active |
3 | Shona | Woldt | Disabled |
4 | Maple | Halladay | Suspended |
5 | Maxine | Woldt | Disabled |
6 | Lorraine | Mcgaughy | Disabled |
7 | Lauri | Hyland | Suspended |
8 | Easer | Dragoo | Active |
9 | Lizzee | Goodlow | Suspended |
10 | Judi | Badgett | Active |
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.