Easily filter your FooTables

Search: Status: [clear]

First Name Last Name Job Title DOB Status
Isidra Boudreaux Traffic Court Referee 22 Jun 1972 Active
Shona Woldt Airline Transport Pilot 3 Oct 1981 Disabled
Granville Leonardo Business Services Sales Representative 19 Apr 1969 Suspended
Easer Dragoo Drywall Stripper 13 Dec 1977 Active
Maple Halladay Aviation Tactical Readiness Officer 30 Dec 1991 Suspended
Maxine Woldt Business Services Sales Representative 17 Oct 1987 Disabled
Lorraine Mcgaughy Hemodialysis Technician 11 Nov 1983 Disabled
Lizzee Goodlow Technical Services Librarian 1 Nov 1961 Suspended
Judi Badgett Electrical Lineworker 23 Jun 1981 Active
Lauri Hyland Blackjack Supervisor 15 Nov 1985 Suspended

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)

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');