Jquery插件

jQuery Column Filters 在table中过滤列.

 

http://www.tomcoote.co.uk/jQueryColumnFilters.aspx

 

jQuery Column Filters

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(); First NameSurnameCountryNumber

Tom	Coote	United Kingdom	1234
Bob	Edwards	Australia	15876
Eddie	Hornblower	France	1234
Steve	Blade	USA	9835
Jeffrey	Gnome	Switzerland	0159
Terry	Winkleman	Canada	023

<script></script>

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

Tested to work in the following browsers;

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

 

Last Updated : 20 May 2008

<!---->

<script></script>

© Tom Coote 2008
<script></script> Contact Me
innoware

<!----> <script src="http://include.reinvigorate.net/re_.js" type="text/javascript"></script> <script type="text/javascript"></script>

<!---->