Check out the getting started demo to see how to setup FooTable.

Include Sorting Add-On

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

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.

Sorting Numeric Data

To sort numeric data, you must specify that the column is data-type="numeric"

Sorting Dates

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>

Disable Sorting On Entire Table

You can disable sorting for a table by adding the data attribute data-sort="false" to the table.

Disable Sorting For Certain Columns

You can disable sorting for specific columns by adding the data attribute data-sort-ignore="true" to the column header definition.

Initial Sorting

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>

Sorting API

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.