Copyright © 2010 Tom Coote. All Rights Reserved. Powered by WordPress themed by bavotasan.com.
I built 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.
Download the source
Visit plugin page at jQuery
Demo Page
Tested to work in the following browsers;
- IE 7 & 6
- FireFox 2.0.0.14
- Opera 9.24
- Safari for windows
FAQ
I get asked this question way to often so I thought I’d post the answer on this page. “How do I change the size of the filter input boxes?”. The answer is to use CSS, the plugin offers no styling as this should be done in your style sheet. The filter boxes are given the class name of “_filterText” and the whole table row is given a class name of “filterColumns”. Set them to 100% wide if you want them to be the same width as your columns are without filter boxes.
June 1, 2010 at 1:39 am
Great post, thank you so much for sharing.
June 9, 2010 at 11:44 am
Awesome!
June 11, 2010 at 4:28 pm
How do you change the width of the Input tags?
June 11, 2010 at 4:38 pm
You can change the width of inputs using CSS. The best way is to set them to 100% because then they don’t push the columns wider. The inputs are given class names that you can apply styles to but I can’t remember what they are off the top of my head. Use firefug to find out what the class names are.
June 11, 2010 at 5:08 pm
I’m not sure that works. I found that all the inputs have the class name “_filterText”. My css is below.
._filterText {
width:100%;
}
This doesn’t work… Any suggestions?
June 11, 2010 at 5:13 pm
Yeah that’s it. That is how I style them when I use the plugin. If you are able to make your work available on the net then I could take a look for you.
June 24, 2010 at 3:01 am
Hi,
Great plugin. Works great. Especially with small data sets.
But for data sets of 1500 to 2000, the grid takes a whole 3:30 minutes to 4 minutes. And if you do a very general filter on the column like just type “a” or “as” .. something like that .. ie 6 does not respond. So do you have any suggestions on improving the performance to use it for large data sets in IE 6.
Thanks.
June 24, 2010 at 8:14 am
I don’t use it on tables that have above 300 – 500 rows because of this. I would recommend a different solution for larger grids. I have a custom solution that filters data on the server then sends back the new table rows.
July 1, 2010 at 3:11 pm
Hi,
thank you for your reply, i am interested in your custom solution. how can i know more details about it?
July 5, 2010 at 8:36 am
Hi. I’m interested in your custom solution too. I have a table of about 1500 items, but like your filtering idea. It’s just too slow, though.
July 5, 2010 at 12:59 pm
Hi, it’s not very complicated, however a solution on the server will be different per server technology that you use. I basically take all the text input into the filter boxes when the user is typing and send them to the server as a JSON string via AJAX using jQuery. Then the server parses the filter text and rebuilds rows for the table, usually from a cached set of data. When the server returns the result I replace the table rows in the table with the new ones. It isn’t possibly to detail the code in these comments and as I’ve said the server side part would differ depending on technology. Best way is to try it.