This jQuery plugin for a quick way of allowing table columns to be filtered by the user. It will add text box’s to the top of each column in a table, by typing into the text box’s you can narrow the number of rows in the table down to those that match your search text. It allows for wild cards and a NOT operator (ie show me everything that doesn’t match my search text).

 $('#filterTable').columnFilters();  

To use this script you need to download jQuery (included in the download below). Each table you apply the script to must be well formed; containing atleast a tbody and a thead. The script doesn’t yet compensate for any cells that have a colspan greater than 1. Below are a list of the variables that can be changed and there defaults. Please also check out the demo!

* wildCard: (default ‘*’) Allow you to search for any characters. eg ‘*m’ or ‘*12*3′
* notCharacter: (default ‘!’) Allow you to NOT the results. eg ‘!T’ would return all rows that don’t start with ‘T’
* caseSensitive: (default ‘false’) Are results case sensitive.
* minSearchCharacters: (default ‘1′) The minimum amount of characters that each search string must contain before the filter is applied.
* excludeColumns: (default ‘[]‘) Which columns, if any, do not require a filter. This array is zero indexed. eg ‘[0,1]‘
* alternateRowClassNames: (default ‘[]‘) An array of alternating class names for each row in order to keep odd and even row styling on tables. Maximum of two items. eg ['rowa','rowb']
* underline (default ‘false’) Set to true if the script is to underline the search text whilst filtering is in progress… good for tables with lots of rows where the filter may take a second. (not in Opera)

One last thing, the row created containing the text box’s is given a class name of ‘filterColumns’ so that you may style that row using CSS.

Tested to work in the following browsers;

* IE 7 & 6
* FireFox 2.0.0.14
* Opera 9.24
* Safari for windows


Demo: http://www.tomcoote.co.uk/JavaScript/columnFilters/demo.html
Download: http://www.tomcoote.co.uk/Downloads/columnFilters.zip
Source: http://plugins.jquery.com/project/ColumnFilters

Related Listings:

1. Multiple Filters Search using Adobe Spry The Spry framework for Ajax is a JavaScript library that...
2. Checkbox filters with jQuery Script Perhaps I’m using delicious.com wrong, but sometimes I wish I...
3. Tables with Style CSS It might not seem like it but styling tabular data...
4. JustAjax Table Script JustAjaxTable 1.9new performs all operation with tables “on-fly” using Ajax...
5. jQuery Live Search Plugin Updated A Quicksilver-style Live Search to jQuery. Taking a look at...

Do you like this post?

Email: