Footable Sorting and Filtering

To include the add-on functionality, simply include a reference to the add-on javascript file (and css if applicable) and footable will take care of the rest!


When you include the sorting add-on, all columns in your table will be sortable by default. You can turn this off for certain columns by adding


You might also want to include the data-type attribute if the column contains numbers or dates. You can also initially sort a specific column on load.

Here is an example of using all 3 together:

<th data-class="expand" data-sort-initial="true">
<span title="table sorted by this column on load">First Name</span>
<th data-hide="default" data-sort-ignore="true">
<span title="sorting disabled on this column">Last Name</span>
<th data-hide="phone,tablet" data-type="numeric">
Date Of Birth
<th data-hide="phone" data-type="numeric">


To get filtering to work, simply include the filtering add-on and then add an input somewhere in your page. Then all you need to do to hook it up is add a data-filter attribute onto the table like this:

search : <input id="filter" type="text" />

<table data-filter="#filter" class="footable">