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

Include Filtering Add-On

You simply need to include the sorting add-on javascript file to make your table filterable:

<script src="path_to_your_js/footable.filter.js" type="text/javascript"></script>

Filtering

Add a text input field to your page, and then tell your FooTable to "watch" it by supplying a data attribute data-filter=#filter on your table element. Where #filter is the selector for the input field.

Filtering Options

You can define the minimum number of characters needed before the table data is filtered. Set a data-filter-minimum="3" on your table element. (default is 2)

You can define the timeout for the delay before the table data is filtered. Set a data-filter-timeout="500" on your table element. (default is 300)

You can force FooTable to only filter by the cell text and ignore any data-values by setting data-filter-text-only="true" on your table element.

Advanced Filtering

As you can see in the source of this demo, you do not need to only rely on a text input field to filter. You can "trigger" a custom filter:

$('table').trigger('footable_filter', {filter: "bob"});

You can also clear the filter with a "trigger":

$('table').trigger('footable_clear_filter');

Filtering API

You can also programmatically filter your table:

$('.filter-api').click(function (e) {
    e.preventDefault();

    //get the footable filter object
    var footableFilter = $('table').data('footable-filter');

    alert('about to filter table by "tech"');
    //filter by 'tech'
    footableFilter.filter('tech');

    //clear the filter
    if (confirm('clear filter now?')) {
        footableFilter.clearFilter();
    }
});