FooTable - jQuery plugin for responsive HTML tables

Easily filter your FooTables

Search: Status:
[clear] [filter API]

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)

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();
        }
    });