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