Footable Sorting and Filtering

I think it’s about time we updated everyone on Footable! Since it was first released, we have completed both the sorting and filtering add-ons.

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!

Sorting

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

data-sort-ignore="true"

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:


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

Filtering

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">

Updated Demos

We have updated the demos to include the sorting and filtering add-ons. Check out the list of demos on the Footable homepage.

A note about dates

if you are using dates in your tables, then please remember to always have a data-value attribute on the cell so that sorting will work:

<td data-value="361093678671">11 Jun 1981</td>