├── .editorconfig ├── .gitignore ├── CHANGELOG.md ├── FAQ.md ├── MIT-LICENSE.txt ├── README.md ├── bower.json ├── examples ├── filtertable-all-terms.html ├── filtertable-any-term.html ├── filtertable-existing-input.html ├── filtertable-ignore-class.html ├── filtertable-ignore-columns.html ├── filtertable-min-chars.html ├── filtertable-min-rows.html ├── filtertable-quick.html ├── filtertable-sample.html ├── filtertable-striping.html ├── index.html ├── samples-common.js └── samples-styles.css ├── filterTable.jquery.json ├── jquery.filtertable.js ├── jquery.filtertable.min.js └── package.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: http://EditorConfig.org 2 | 3 | # 4 | root = true 5 | 6 | # all files 7 | [*] 8 | end_of_line = lf 9 | insert_final_newline = true 10 | indent_style = space 11 | indent_size = 4 12 | charset = utf-8 13 | trim_trailing_whitespace = true 14 | 15 | # sass files 16 | [*.{scss,sass}] 17 | indent_size = 2 18 | 19 | # markdown 20 | [*.md] 21 | trim_trailing_whitespace = false 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OS generated files # 2 | ###################### 3 | .DS_Store 4 | .DS_Store? 5 | ._* 6 | .Spotlight-V100 7 | .Trashes 8 | Icon? 9 | ehthumbs.db 10 | Thumbs.db 11 | 12 | # Codekit files 13 | config.codekit* 14 | .codekit-cache 15 | examples-codekit/ 16 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # jQuery.filterTable Change Log 2 | 3 | ## 1.5.7 4 | - Support for `quickListClear` option that appends a quick list link which clears the filter. 5 | 6 | ## 1.5.6 7 | - Fixed filtering to work for special characters `'`, `"`, and `\`. 8 | - Minor documentation updates. 9 | 10 | ## 1.5.5 11 | 12 | - The filtering should now trigger automatically on input on iOS. For some reason, Safari iOS triggers a `blur` event on field change but not `keyup` or other related events. 13 | - A new feature for extending the plugin (option `filterExpression`) has been added. The default is unchanged—the literal filter string. 14 | - To search for _any_ of multiple terms, set `filterExpression` to `filterTableFindAny` to perform an OR search which delimits on space or comma characters in the filter field. Thank you to [Lukas](https://github.com/superlukas) for the implementation. An example page is included. 15 | - To search for _all_ of multiple terms, set `filterExpression` to `filterTableFindAll` to perform an AND search which delimits on space or comma characters in the filter field. Note that the matching is per-cell not per row, so each cell must have all terms to match. An example page is included. 16 | - A new feature for ignoring columns is available via the `ignoreColumns` option. Provide an array of column numbers (0-indexed) to ignore those columns during filtering. The default is no columns are ignored. An example page is included. 17 | - A new feature for ignoring cells with a specific class is available via the `ignoreClass` option. Provide a class name to ignore those cells during filtering. The default is no classes are ignored. An exampled page is included. Thanks to [geda0](https://github.com/geda0) for the idea. 18 | - Added a `minChars` option, thanks to [Darius Kazemi](https://github.com/dariusk), which specifies the minimum number of characters a user must enter into the filter field before filtering occurs. Default is 1, meaning the moment the user begins to type, filtering will occur. 19 | - Merged [Pierre Rudloff](https://github.com/Rudloff)’s Bower support. 20 | - Merged [Jason](https://github.com/deadbeef404)’s `minRows` bug fix. 21 | - Added an FAQ file. 22 | 23 | ## 1.5.4 24 | 25 | - Added a return key trap to the input filter field so that pressing return in the field should not submit any forms the table may be within. 26 | - The `preventReturnKey` option (`true` by default) has been added to allow you to switch back to the previous behavior of allowing the return key to submit forms. 27 | 28 | ## 1.5.3 29 | 30 | - **There is a potentially significant change in functionality in this version.** While the documentation offered the `inputSelector` option, within the code it was implemented as `filterSelector`. This has been corrected to match the documentation. Note that if you were previously using the `filterSelector` option to overcome this issue, you will need to change it to `inputSelector` to use the feature with this version. 31 | 32 | ## 1.5.2 33 | 34 | - Added an `inputSelector` option, thanks to [Pratik Thakkar](https://github.com/pratikt), which specifies a selector for an existing element to use instead of creating a new filter input field. There are some caveats of which to be aware: 35 | - If the element doesn't exist, a filter input field will be created as normal. 36 | - Because of quick lists and other options, this setting will be ignored and the filter input field will be created as normal if the resolution of the `inputSelector` returns more than one element. 37 | 38 | ## 1.5.1 39 | 40 | - Added an `autofocus` option, thanks to [Robert McLeod](https://github.com/penguinpowernz), which is disabled by default. Note that autofocus is generally a bad idea for accessibility reasons, but if you do not need to be compliant or don't want to support accessibility users, it's a nice user experience option. 41 | 42 | ## 1.5 43 | 44 | - **There is a potentially significant change in functionality in this version.** The callback is now called every time the search query changes. Previously it was only called when the change was a non-empty query. That is, the callback is now called when the query is cleared too. 45 | - Additional features have been taken from [Tomas Celizna](https://github.com/tomasc)'s CoffeeScript-based fork: 46 | - The quick list items can now be something other than anchor tags. See the `quickListTag` and `quickListGroupTag` options. 47 | - The filter query field can now have a name attribute assigned to it. See the `inputName` option. 48 | - The class applied to visible rows is now user changeable. See the `visibleClass` option. 49 | - The options in the documentation have been ordered alphabetically for easier scanning. 50 | - The internal pseudo selector is now created appropriately according to the jQuery version. (Pseudo selector generation changed in jQuery 1.8) 51 | 52 | ## 1.4 53 | 54 | - Fixed a bug with filtering rarely showing rows that did not have a match with the search query. 55 | - Added example pages. 56 | - Improved inline documentation of the source code. 57 | 58 | ## 1.3.1 (in spirit) 59 | 60 | - Added minified version of the plugin (thanks [Luke Stevenson](https://github.com/lucanos)). 61 | 62 | ## 1.3 63 | 64 | - The functionality is not reapplied to tables that have already been processed. This allows you to call `$(selector).filterTable()` again for dynamically created data without it affecting previously filtered tables. 65 | 66 | ## 1.2 67 | 68 | - Changed the default container class to `filter-table` from `table-filter` to be consistent with the plugin name. 69 | - Made the cell highlighting class an option rather than hard-coded. 70 | 71 | ## 1.1 72 | 73 | - Initial public release. 74 | -------------------------------------------------------------------------------- /FAQ.md: -------------------------------------------------------------------------------- 1 | # jQuery.filterTable Frequently Asked Questions 2 | 3 | ## How do I keep the header and/or footer rows from disappearing on filter? 4 | 5 | Ensure your header row(s) are in `` tags, your data row(s) are in `` tags, and your footer row(s) are in `` tags. The plugin only filters `tbody` rows, but if you do not specify `thead`, `tbody`, `tfoot`, the brower puts all of your rows in a `tbody` block. 6 | 7 | ## Why isn't the filtering showing up on small tables? 8 | 9 | The plugin will not show for tables with fewer than `8` rows by default. To have the filter feature always appear, set the `minRows` option accordingly. For example: 10 | 11 | $('table').filterTable({minRows: 0}); 12 | 13 | Or see the [minRows example page](http://sunnywalker.github.io/jQuery.FilterTable/examples/filtertable-min-rows.html). 14 | 15 | -------------------------------------------------------------------------------- /MIT-LICENSE.txt: -------------------------------------------------------------------------------- 1 | (The MIT License) 2 | 3 | Copyright (c) 2012 Sunny Walker 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # jQuery Filter Table Plugin 2 | 3 | This plugin will add a search filter to tables. When typing in the filter, any rows that do not contain the filter will be hidden. 4 | 5 | One can also define clickable shortcuts for commonly used terms. 6 | 7 | See the demos at http://sunnywalker.github.com/jQuery.FilterTable 8 | 9 | ## Usage 10 | 11 | Include the dependencies: 12 | 13 | ```html 14 | 15 | 16 | 17 | 22 | ``` 23 | 24 | Then apply `filterTable()` to your table(s): 25 | 26 | ```html 27 | 30 | ``` 31 | 32 | ## Problems? 33 | 34 | Be sure to check the FAQ file for common issues if the plugin does not seem to be working as intended. 35 | 36 | Note that the plugin does not work as expected when using cells with `rowspan`. 37 | 38 | ## Options 39 | 40 | | Option | Type | Default | Description | 41 | | ------ | ---- | ------- | ----------- | 42 | | `autofocus` | boolean | false | Makes the filter input field autofocused _(not recommended for accessibility reasons)_ | 43 | | `callback` | function(`term`, `table`) | _null_ | Callback function after a filter is performed. Parameters: | 44 | | `containerClass` | string | filter-table | Class applied to the main filter input container | 45 | | `containerTag` | string | p | Tag name of the main filter input container | 46 | | `hideTFootOnFilter` | boolean | false | Controls whether the table's tfoot(s) will be hidden when the table is filtered | 47 | | `highlightClass` | string | alt | Class applied to cells containing the filter term | 48 | | `ignoreClass` | string | '' | Ignore any cells with this class when filtering | 49 | | `ignoreColumns` | array | [] | Ignore these columns (0-indexed) when filtering | 50 | | `inputSelector` | string | _null_ | Use this selector to find the filter input instead of creating a new one (only works if selector returns a single element) | 51 | | `inputName` | string | filter-table | Name attribute of the filter input field | 52 | | `inputType` | string | search | Tag name of the filter input itself | 53 | | `label` | string | Filter: | Text to precede the filter input | 54 | | `minChars` | integer | 1 | Filter only when at least this number of characters are in the filter input field | 55 | | `minRows` | integer | 8 | Only show the filter on tables with this number of rows or more | 56 | | `placeholder` | string | search this table | HTML5 placeholder text for the filter input | 57 | | `preventReturnKey` | boolean | true | Trap the return key in the filter input field to prevent form submission | 58 | | `quickList` | array | [] | List of clickable phrases to quick fill the search | 59 | | `quickListClass` | string | quick | Class of each quick list item | 60 | | `quickListClear` | string | '' | Label for the clear filtering quick list item (or none if blank) | 61 | | `quickListGroupTag` | string | '' | Tag name surrounding quick list items (e.g., `ul`) | 62 | | `quickListTag` | string | a | Tag name of each quick list item (e.g., `a` or `li`) | 63 | | `visibleClass` | string | visible | Class applied to visible rows | 64 | 65 | ## Styling 66 | 67 | Suggested styling: 68 | 69 | ```css 70 | .filter-table .quick { margin-left: 0.5em; font-size: 0.8em; text-decoration: none; } 71 | .fitler-table .quick:hover { text-decoration: underline; } 72 | td.alt { background-color: #ffc; background-color: rgba(255, 255, 0, 0.2); } 73 | ``` 74 | 75 | There is a caveat on automatic row striping. While alternating rows can be striped with CSS, such as: 76 | 77 | ```css 78 | tbody td:nth-child(even) { background-color: #f0f8ff; } 79 | ``` 80 | 81 | Note that CSS cannot differentiate between visible and non-visible rows. To that end, it's better to use jQuery to add and remove a striping class to visible rows by defining a callback function in the options. 82 | 83 | ```javascript 84 | $('table').filterTable({ 85 | callback: function(term, table) { 86 | table.find('tr').removeClass('striped').filter(':visible:even').addClass('striped'); 87 | } 88 | }); 89 | ``` 90 | 91 | ## Dependencies 92 | 93 | Other than jQuery, the plugin will take advantage of Brian Grinstead's [bindWithDelay](https://github.com/bgrins/bindWithDelay) if it is available. 94 | 95 | ## License 96 | 97 | (The MIT License) 98 | 99 | Copyright (c) 2012 Sunny Walker 100 | 101 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 102 | 103 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 104 | 105 | THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 106 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "filterTable", 3 | "description": "Live searching/filtering for HTML tables with optional quick search buttons.", 4 | "keywords": [ 5 | "table", 6 | "search", 7 | "filter" 8 | ], 9 | "authors": [ 10 | { 11 | "name": "Sunny Walker", 12 | "homepage": "http://www.miraclesalad.com/" 13 | } 14 | ], 15 | "license": "MIT", 16 | "homepage": "http://sunnywalker.github.io/jQuery.FilterTable/", 17 | "dependencies": { 18 | "jquery": ">=1.4" 19 | }, 20 | "main": "jquery.filtertable.js", 21 | "ignore": [ 22 | "examples/", 23 | "**/.*" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /examples/filtertable-all-terms.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jQuery.FilterTable All Terms Sample 7 | 8 | 12 | 13 | 14 |

jQuery.FilterTable All Terms Sample

15 |

← More samples

16 |

This is a sample of the jQuery.FilterTable plugin which searchs for all of the terms instead of the literal term (a AND b). The term delimiters are comma (,) and space ( ).

17 |

It's important to note that the term matching is per-cell, not per-row. That is, to match, each cell must have all of the terms.

18 |

For example:

19 | 25 |

Presidents of the United States of America

26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 |
#PresidentTermsTenure
1George Washingtontwo1789-1797
2John Adamsone1797-1801
3Thomas Jeffersontwo1801-1809
4James Madisontwo1809-1817
5James Monroetwo1817-1825
6John Quincy Adamsone1825-1829
7Andrew Jacksontwo1829-1837
8Martin Van Burenone1837-1841
9William Henry Harrisonone-partial1841
10John Tylerone-partial1841-1845
11James Knox Polkone1845-1849
12Zachary Taylorone-partial1849-1850
13Millard Fillmoreone-partial1850-1853
14Franklin Pierceone1853-1857
15James Buchananone1857-1861
16Abraham Lincolntwo-partial1861-1865
17Andrew Johnsonone-partial1865-1869
18Ulysses S. Granttwo1869-1877
19Rutherford Birchard Hayesone1877-1881
20James Abram Garfieldone-partial1881
21Chester Alan Arthurone-partial1881-1885
22Grover Clevelandone1885-1889
23Benjamin Harrisonone1889-1893
24Grover Clevelandone-again1893-1897
25William McKinleytwo-partial1897-1901
26Theodore Roosevelttwo-partial1901-1909
27William Howard Taftone1909-1913
28Woodrow Wilsontwo1913-1921
29Warren Gamaliel Hardingtwo-partial1921-1923
30Calvin Coolidgetwo-partial1923-1929
31Herbert Clark Hooverone1929-1933
32Franklin Delano Rooseveltfour-partial1933-1945
33Harry S. Trumantwo-partial1945-1953
34Dwight David Eisenhowertwo1953-1961
35John Fitzgerald Kennedytwo-partial1961-1963
36Lyndon Baines Johnsontwo-partial1963-1969
37Richard Milhous Nixontwo-partial1969-1974
38Gerald Rudolph Fordtwo-partial1974-1977
39James Earl Carter, Jr.one1977-1981
40Ronald Wilson Reagantwo1981-1989
41George Herbert Walker Bushone1989-1993
42William Jefferson Clintontwo1993-2001
43George Walker Bushtwo2001-2009
44Barack Hussein Obamaone2009-
82 |

Data as of October, 2012.

83 |

Code

84 | 
$('table').filterTable({
85 |     filterExpression: 'filterTableFindAll'
86 | });
87 | 88 | 89 | 95 | 96 | 97 | -------------------------------------------------------------------------------- /examples/filtertable-any-term.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jQuery.FilterTable Any Term Sample 7 | 8 | 12 | 13 | 14 |

jQuery.FilterTable Any Term Sample

15 |

← More samples

16 |

This is a sample of the jQuery.FilterTable plugin which searchs for any of the terms instead of the literal term (a OR b). The term delimiters are comma (,) and space ( ).

17 |

For example:

18 | 22 |

Presidents of the United States of America

23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 |
#PresidentTermsTenure
1George Washingtontwo1789-1797
2John Adamsone1797-1801
3Thomas Jeffersontwo1801-1809
4James Madisontwo1809-1817
5James Monroetwo1817-1825
6John Quincy Adamsone1825-1829
7Andrew Jacksontwo1829-1837
8Martin Van Burenone1837-1841
9William Henry Harrisonone-partial1841
10John Tylerone-partial1841-1845
11James Knox Polkone1845-1849
12Zachary Taylorone-partial1849-1850
13Millard Fillmoreone-partial1850-1853
14Franklin Pierceone1853-1857
15James Buchananone1857-1861
16Abraham Lincolntwo-partial1861-1865
17Andrew Johnsonone-partial1865-1869
18Ulysses S. Granttwo1869-1877
19Rutherford Birchard Hayesone1877-1881
20James Abram Garfieldone-partial1881
21Chester Alan Arthurone-partial1881-1885
22Grover Clevelandone1885-1889
23Benjamin Harrisonone1889-1893
24Grover Clevelandone-again1893-1897
25William McKinleytwo-partial1897-1901
26Theodore Roosevelttwo-partial1901-1909
27William Howard Taftone1909-1913
28Woodrow Wilsontwo1913-1921
29Warren Gamaliel Hardingtwo-partial1921-1923
30Calvin Coolidgetwo-partial1923-1929
31Herbert Clark Hooverone1929-1933
32Franklin Delano Rooseveltfour-partial1933-1945
33Harry S. Trumantwo-partial1945-1953
34Dwight David Eisenhowertwo1953-1961
35John Fitzgerald Kennedytwo-partial1961-1963
36Lyndon Baines Johnsontwo-partial1963-1969
37Richard Milhous Nixontwo-partial1969-1974
38Gerald Rudolph Fordtwo-partial1974-1977
39James Earl Carter, Jr.one1977-1981
40Ronald Wilson Reagantwo1981-1989
41George Herbert Walker Bushone1989-1993
42William Jefferson Clintontwo1993-2001
43George Walker Bushtwo2001-2009
44Barack Hussein Obamaone2009-
79 |

Data as of October, 2012.

80 |

Code

81 | 
$('table').filterTable({
82 |     filterExpression: 'filterTableFindAny'
83 | });
84 | 85 | 86 | 92 | 93 | 94 | -------------------------------------------------------------------------------- /examples/filtertable-existing-input.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jQuery.FilterTable Sample With an Existing Input 7 | 8 | 15 | 16 | 17 |

jQuery.FilterTable Sample With an Existing Input

18 |

← More samples

19 |
20 |

This is a sample of the jQuery.FilterTable plugin which uses an existing element to filter the table instead of creating its own.

21 |

Presidents of the United States of America

22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 |
#PresidentTermsTenure
1George Washingtontwo1789-1797
2John Adamsone1797-1801
3Thomas Jeffersontwo1801-1809
4James Madisontwo1809-1817
5James Monroetwo1817-1825
6John Quincy Adamsone1825-1829
7Andrew Jacksontwo1829-1837
8Martin Van Burenone1837-1841
9William Henry Harrisonone-partial1841
10John Tylerone-partial1841-1845
11James Knox Polkone1845-1849
12Zachary Taylorone-partial1849-1850
13Millard Fillmoreone-partial1850-1853
14Franklin Pierceone1853-1857
15James Buchananone1857-1861
16Abraham Lincolntwo-partial1861-1865
17Andrew Johnsonone-partial1865-1869
18Ulysses S. Granttwo1869-1877
19Rutherford Birchard Hayesone1877-1881
20James Abram Garfieldone-partial1881
21Chester Alan Arthurone-partial1881-1885
22Grover Clevelandone1885-1889
23Benjamin Harrisonone1889-1893
24Grover Clevelandone-again1893-1897
25William McKinleytwo-partial1897-1901
26Theodore Roosevelttwo-partial1901-1909
27William Howard Taftone1909-1913
28Woodrow Wilsontwo1913-1921
29Warren Gamaliel Hardingtwo-partial1921-1923
30Calvin Coolidgetwo-partial1923-1929
31Herbert Clark Hooverone1929-1933
32Franklin Delano Rooseveltfour-partial1933-1945
33Harry S. Trumantwo-partial1945-1953
34Dwight David Eisenhowertwo1953-1961
35John Fitzgerald Kennedytwo-partial1961-1963
36Lyndon Baines Johnsontwo-partial1963-1969
37Richard Milhous Nixontwo-partial1969-1974
38Gerald Rudolph Fordtwo-partial1974-1977
39James Earl Carter, Jr.one1977-1981
40Ronald Wilson Reagantwo1981-1989
41George Herbert Walker Bushone1989-1993
42William Jefferson Clintontwo1993-2001
43George Walker Bushtwo2001-2009
44Barack Hussein Obamaone2009-
78 |

Data as of October, 2012.

79 |

Code

80 | 
$('table').filterTable({
81 |     inputSelector: '#input-filter'
82 | });
83 | 84 | 85 | 92 | 93 | -------------------------------------------------------------------------------- /examples/filtertable-ignore-class.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jQuery.FilterTable Ignore a Class Sample 7 | 8 | 15 | 16 | 17 |

jQuery.FilterTable Ignore a Class Sample

18 |

← More samples

19 |

Ignore a Class

20 |

This is a sample of the jQuery.FilterTable plugin using the ignoreClass option.

21 |

In this sample, cells with the no-filter class are ignored—not filtered. Also in this sample, the ignored cells are styled via CSS to help identify that they are ignored.

22 |

For example:

23 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 |
FruitMesocarp Color(s) When Ripe
AvocadoGreen
BananaYellow
Dragon fruitPink, White
GuavaPink
Lilikoʻi (Passion fruit)Orange, Yellow
LycheeWhite
MangoOrange, Yellow
PapayaOrange, Red, Yellow
PineappleWhite, Yellow
Star fruitGreen, White, Yellow
48 |

Code

49 | 
$('table').filterTable({
50 |     ignoreClass: 'no-filter'
51 | });
52 | 53 | 54 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /examples/filtertable-ignore-columns.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jQuery.FilterTable Ignore Columns Samples 7 | 8 | 15 | 16 | 17 |

jQuery.FilterTable Ignore Columns Sample

18 |

← More samples

19 |

This is a sample of the jQuery.FilterTable plugin using the ignoreColumns option.

20 |

In this sample, columns the first and third columns (0 and 2) are ignored—not filtered. Also in this sample, the ignored columns are styled via CSS to help identify that they are ignored.

21 |

For example:

22 | 27 |

Presidents of the United States of America

28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 |
#PresidentTermsTenure
1George Washingtontwo1789-1797
2John Adamsone1797-1801
3Thomas Jeffersontwo1801-1809
4James Madisontwo1809-1817
5James Monroetwo1817-1825
6John Quincy Adamsone1825-1829
7Andrew Jacksontwo1829-1837
8Martin Van Burenone1837-1841
9William Henry Harrisonone-partial1841
10John Tylerone-partial1841-1845
11James Knox Polkone1845-1849
12Zachary Taylorone-partial1849-1850
13Millard Fillmoreone-partial1850-1853
14Franklin Pierceone1853-1857
15James Buchananone1857-1861
16Abraham Lincolntwo-partial1861-1865
17Andrew Johnsonone-partial1865-1869
18Ulysses S. Granttwo1869-1877
19Rutherford Birchard Hayesone1877-1881
20James Abram Garfieldone-partial1881
21Chester Alan Arthurone-partial1881-1885
22Grover Clevelandone1885-1889
23Benjamin Harrisonone1889-1893
24Grover Clevelandone-again1893-1897
25William McKinleytwo-partial1897-1901
26Theodore Roosevelttwo-partial1901-1909
27William Howard Taftone1909-1913
28Woodrow Wilsontwo1913-1921
29Warren Gamaliel Hardingtwo-partial1921-1923
30Calvin Coolidgetwo-partial1923-1929
31Herbert Clark Hooverone1929-1933
32Franklin Delano Rooseveltfour-partial1933-1945
33Harry S. Trumantwo-partial1945-1953
34Dwight David Eisenhowertwo1953-1961
35John Fitzgerald Kennedytwo-partial1961-1963
36Lyndon Baines Johnsontwo-partial1963-1969
37Richard Milhous Nixontwo-partial1969-1974
38Gerald Rudolph Fordtwo-partial1974-1977
39James Earl Carter, Jr.one1977-1981
40Ronald Wilson Reagantwo1981-1989
41George Herbert Walker Bushone1989-1993
42William Jefferson Clintontwo1993-2001
43George Walker Bushtwo2001-2009
44Barack Hussein Obamaone2009-
84 |

Data as of October, 2012.

85 |

Code

86 | 
$('table').filterTable({
87 |     ignoreColumns: [0, 2]
88 | });
89 | 90 | 91 | 97 | 98 | 99 | -------------------------------------------------------------------------------- /examples/filtertable-min-chars.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jQuery.FilterTable Sample 7 | 8 | 12 | 13 | 14 |

jQuery.FilterTable Minimum Characters Sample

15 |

← More samples

16 |

This is a sample of the jQuery.FilterTable plugin illustrating the minChars option. This sample sets the option to 3, meaning the term must be at least 3 characters to trigger the filtering.

17 |

Special note for usability: Your visitors may not know that there is a minumum number of characters needed for the filtering, so you will likely want to also indicate so with the label or placeholder options.

18 |

For example:

19 | 25 |

Presidents of the United States of America

26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 |
#PresidentTermsTenure
1George Washingtontwo1789-1797
2John Adamsone1797-1801
3Thomas Jeffersontwo1801-1809
4James Madisontwo1809-1817
5James Monroetwo1817-1825
6John Quincy Adamsone1825-1829
7Andrew Jacksontwo1829-1837
8Martin Van Burenone1837-1841
9William Henry Harrisonone-partial1841
10John Tylerone-partial1841-1845
11James Knox Polkone1845-1849
12Zachary Taylorone-partial1849-1850
13Millard Fillmoreone-partial1850-1853
14Franklin Pierceone1853-1857
15James Buchananone1857-1861
16Abraham Lincolntwo-partial1861-1865
17Andrew Johnsonone-partial1865-1869
18Ulysses S. Granttwo1869-1877
19Rutherford Birchard Hayesone1877-1881
20James Abram Garfieldone-partial1881
21Chester Alan Arthurone-partial1881-1885
22Grover Clevelandone1885-1889
23Benjamin Harrisonone1889-1893
24Grover Clevelandone-again1893-1897
25William McKinleytwo-partial1897-1901
26Theodore Roosevelttwo-partial1901-1909
27William Howard Taftone1909-1913
28Woodrow Wilsontwo1913-1921
29Warren Gamaliel Hardingtwo-partial1921-1923
30Calvin Coolidgetwo-partial1923-1929
31Herbert Clark Hooverone1929-1933
32Franklin Delano Rooseveltfour-partial1933-1945
33Harry S. Trumantwo-partial1945-1953
34Dwight David Eisenhowertwo1953-1961
35John Fitzgerald Kennedytwo-partial1961-1963
36Lyndon Baines Johnsontwo-partial1963-1969
37Richard Milhous Nixontwo-partial1969-1974
38Gerald Rudolph Fordtwo-partial1974-1977
39James Earl Carter, Jr.one1977-1981
40Ronald Wilson Reagantwo1981-1989
41George Herbert Walker Bushone1989-1993
42William Jefferson Clintontwo1993-2001
43George Walker Bushtwo2001-2009
44Barack Hussein Obamaone2009-
82 |

Data as of October, 2012.

83 |

Code

84 | 
$('table').filterTable({
85 |     minChars: 3,
86 |     label: 'Filter (3+ characters):'
87 | });
88 | 89 | 90 | 95 | 96 | 97 | -------------------------------------------------------------------------------- /examples/filtertable-min-rows.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jQuery.FilterTable Minimum Rows Sample 7 | 8 | 12 | 13 | 14 |

jQuery.FilterTable Minimum Rows Sample

15 |

← More samples

16 |

This is a sample of the jQuery.FilterTable plugin which illustrates the minRows option.

17 |

Example 1: Mininum Rows Default (8)

18 |

By default, the plugin will add filtering only to tables with at least 8 rows in the tbody. In this example, the table has more than the minimum rows, so filtering is added.

19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 |
FruitMesocarp Color(s) When Ripe
AvocadoGreen
BananaYellow
Dragon fruitPink, White
GuavaPink
Lilikoʻi (Passion fruit)Orange, Yellow
LycheeWhite
MangoOrange, Yellow
PapayaOrange, Red, Yellow
PineappleWhite, Yellow
Star fruitGreen, White, Yellow
39 |

Code

40 | 
$('.example-1').filterTable();
41 | 42 |

Example 2: Mininum Rows Default (8) on a Small Table

43 |

By default, the plugin will add filtering only to tables with at least 8 rows in the tbody. On a table with fewer than this minimum, no filtering is added.

44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 |
FruitMesocarp Color(s) When Ripe
AvocadoGreen
BananaYellow
MangoOrange, Yellow
PapayaOrange, Red, Yellow
PineappleWhite, Yellow
59 |

Code

60 | 
$('.example-2').filterTable();
61 | 62 |

Example 3: Mininum Rows 0 on a Small Table

63 |

Setting the minRows option to 0 will always add filtering to a table, no matter how many rows the tbody contains.

64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 |
FruitMesocarp Color(s) When Ripe
AvocadoGreen
BananaYellow
MangoOrange, Yellow
PapayaOrange, Red, Yellow
PineappleWhite, Yellow
79 |

Code

80 | 
$('.example-3').filterTable({
81 |     minRows: 0
82 | });
83 | 84 | 85 | 86 | 93 | 94 | -------------------------------------------------------------------------------- /examples/filtertable-quick.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jQuery.FilterTable Quick List Sample 7 | 8 | 22 | 23 | 24 |

jQuery.FilterTable Quick List Sample

25 |

← More samples

26 |

This is a sample of the jQuery.FilterTable plugin which shows the usage of the quickList optional parameter.

27 |

Note that the “neighbor island” quick list item works because within some cells exists code that is hidden with CSS: <span class="hidden">neighbor island</span>.

28 |

Main campuses of the University of Hawaiʻi System

29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 |
CampusIslandFall 2011
Enrollment
University of Hawaiʻi at HiloHawaiʻi 4,100
University of Hawaiʻi at MānoaOʻahu20,400
University of Hawaiʻi—West OʻahuOʻahu1,600
Hawaiʻi Community CollegeHawaiʻi 3,900
Honolulu Community CollegeOʻahu4,600
Kapiʻolani Community CollegeOʻahu9,000
Kauaʻi Community CollegeKauaʻi 1,400
Leeward Community CollegeOʻahu7,900
Maui CollegeMaui 4,500
Windward Community CollegeOʻahu2,700
90 |

Note that while the filter is case-insensitive, it is UTF-8 aware so searching for oahu will not find Oʻahu.

91 | 92 |

Code

93 | 
$('table').filterTable({
 94 |     quickList: quickList: [
 95 |         'Oʻahu',
 96 |         'Hawaiʻi',
 97 |         'university',
 98 |         'college',
 99 |         'neighbor island'
100 |     ],
101 |     quickListClear: '× clear filter'
102 | });
103 | 104 | 105 | 106 | 114 | 115 | 116 | -------------------------------------------------------------------------------- /examples/filtertable-sample.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jQuery.FilterTable Sample 7 | 8 | 12 | 13 | 14 |

jQuery.FilterTable Sample

15 |

← More samples

16 |

This is a very plain sample of the jQuery.FilterTable plugin.

17 |

Presidents of the United States of America

18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 |
#PresidentTermsTenure
1George Washingtontwo1789-1797
2John Adamsone1797-1801
3Thomas Jeffersontwo1801-1809
4James Madisontwo1809-1817
5James Monroetwo1817-1825
6John Quincy Adamsone1825-1829
7Andrew Jacksontwo1829-1837
8Martin Van Burenone1837-1841
9William Henry Harrisonone-partial1841
10John Tylerone-partial1841-1845
11James Knox Polkone1845-1849
12Zachary Taylorone-partial1849-1850
13Millard Fillmoreone-partial1850-1853
14Franklin Pierceone1853-1857
15James Buchananone1857-1861
16Abraham Lincolntwo-partial1861-1865
17Andrew Johnsonone-partial1865-1869
18Ulysses S. Granttwo1869-1877
19Rutherford Birchard Hayesone1877-1881
20James Abram Garfieldone-partial1881
21Chester Alan Arthurone-partial1881-1885
22Grover Clevelandone1885-1889
23Benjamin Harrisonone1889-1893
24Grover Clevelandone-again1893-1897
25William McKinleytwo-partial1897-1901
26Theodore Roosevelttwo-partial1901-1909
27William Howard Taftone1909-1913
28Woodrow Wilsontwo1913-1921
29Warren Gamaliel Hardingtwo-partial1921-1923
30Calvin Coolidgetwo-partial1923-1929
31Herbert Clark Hooverone1929-1933
32Franklin Delano Rooseveltfour-partial1933-1945
33Harry S. Trumantwo-partial1945-1953
34Dwight David Eisenhowertwo1953-1961
35John Fitzgerald Kennedytwo-partial1961-1963
36Lyndon Baines Johnsontwo-partial1963-1969
37Richard Milhous Nixontwo-partial1969-1974
38Gerald Rudolph Fordtwo-partial1974-1977
39James Earl Carter, Jr.one1977-1981
40Ronald Wilson Reagantwo1981-1989
41George Herbert Walker Bushone1989-1993
42William Jefferson Clintontwo1993-2001
43George Walker Bushtwo2001-2009
44Barack Hussein Obamaone2009-
74 |

Data as of October, 2012.

75 |

Code

76 | 
$('table').filterTable();
77 | 78 | 79 | 84 | 85 | -------------------------------------------------------------------------------- /examples/filtertable-striping.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jQuery.FilterTable Striping Sample 7 | 8 | 17 | 18 | 19 |

jQuery.FilterTable Striping Sample

20 |

← More samples

21 |

This is a plain row striping sample of the jQuery.FilterTable plugin. It shows the code to stripe alternate rows.

22 |

Presidents of the United States of America

23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 |
#PresidentTermsTenure
1George Washingtontwo1789-1797
2John Adamsone1797-1801
3Thomas Jeffersontwo1801-1809
4James Madisontwo1809-1817
5James Monroetwo1817-1825
6John Quincy Adamsone1825-1829
7Andrew Jacksontwo1829-1837
8Martin Van Burenone1837-1841
9William Henry Harrisonone-partial1841
10John Tylerone-partial1841-1845
11James Knox Polkone1845-1849
12Zachary Taylorone-partial1849-1850
13Millard Fillmoreone-partial1850-1853
14Franklin Pierceone1853-1857
15James Buchananone1857-1861
16Abraham Lincolntwo-partial1861-1865
17Andrew Johnsonone-partial1865-1869
18Ulysses S. Granttwo1869-1877
19Rutherford Birchard Hayesone1877-1881
20James Abram Garfieldone-partial1881
21Chester Alan Arthurone-partial1881-1885
22Grover Clevelandone1885-1889
23Benjamin Harrisonone1889-1893
24Grover Clevelandone-again1893-1897
25William McKinleytwo-partial1897-1901
26Theodore Roosevelttwo-partial1901-1909
27William Howard Taftone1909-1913
28Woodrow Wilsontwo1913-1921
29Warren Gamaliel Hardingtwo-partial1921-1923
30Calvin Coolidgetwo-partial1923-1929
31Herbert Clark Hooverone1929-1933
32Franklin Delano Rooseveltfour-partial1933-1945
33Harry S. Trumantwo-partial1945-1953
34Dwight David Eisenhowertwo1953-1961
35John Fitzgerald Kennedytwo-partial1961-1963
36Lyndon Baines Johnsontwo-partial1963-1969
37Richard Milhous Nixontwo-partial1969-1974
38Gerald Rudolph Fordtwo-partial1974-1977
39James Earl Carter, Jr.one1977-1981
40Ronald Wilson Reagantwo1981-1989
41George Herbert Walker Bushone1989-1993
42William Jefferson Clintontwo1993-2001
43George Walker Bushtwo2001-2009
44Barack Hussein Obamaone2009-
79 |

Data as of October, 2012.

80 |

Code

81 | 
var stripeTable = function(table) { //stripe the table (jQuery selector)
 82 |     table.find('tr').removeClass('striped').filter(':visible:even').addClass('striped');
 83 | };
 84 | $('table').filterTable({
 85 |     callback: function(term, table) { stripeTable(table); } //call the striping after every change to the filter term
 86 | });
 87 | stripeTable($('table')); //stripe the table for the first time
88 | 89 | 90 | 101 | 102 | -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | jQuery.FilterTable Samples 8 | 9 | 10 |

jQuery.FilterTable Samples

11 |

The following are very basic pages which use the jQuery Filter Table Plugin.

12 | 24 | 25 | -------------------------------------------------------------------------------- /examples/samples-common.js: -------------------------------------------------------------------------------- 1 | ;(function($) { 2 | $(document).ready(function() { 3 | // allow the example links to fill and trigger the filtering 4 | $('.fill-filter').on('click', function(ev) { 5 | ev.preventDefault(); 6 | $('.filter-table input').val($(this).text()).focus().trigger('click'); 7 | }); 8 | }); 9 | })(jQuery); 10 | -------------------------------------------------------------------------------- /examples/samples-styles.css: -------------------------------------------------------------------------------- 1 | /* 2 | These styles are for the sample pages, 3 | and have no impact on the use or functionality 4 | of the jQuery Filter Table Plugin. 5 | 6 | Plugin related styling is contained within 7 | each sample page. 8 | */ 9 | 10 | /* generic page styling */ 11 | * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 12 | body { -webkit-font-smoothing: antialiased; font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 100%; margin: 0 auto; max-width: 40em; padding-bottom: 3em; } 13 | pre, code { background-color: rgba(0, 0, 0, 0.04); padding: 0.2em 0; margin: 0; font-size: 85%; border-radius: 3px; font-family: Consolas, Menlo, monospace; } 14 | pre { white-space: pre-wrap; } 15 | 16 | h2 { margin-top: 1em; padding-top: 1em; border-top: 2px solid #eee; } 17 | 18 | li { margin-bottom: 0.5em; } 19 | 20 | /* generic table styling */ 21 | table { border-collapse: collapse; width: 100%; } 22 | th, td { padding: 5px; } 23 | th { border-bottom: 2px solid #999; background-color: #eee; vertical-align: bottom; text-align: left; } 24 | td { border-bottom: 1px solid #ccc; } 25 | -------------------------------------------------------------------------------- /filterTable.jquery.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "filterTable", 3 | "title": "jQuery FilterTable", 4 | "description": "Live searching/filtering for HTML tables with optional quick search buttons.", 5 | "keywords": [ 6 | "table", 7 | "search", 8 | "filter" 9 | ], 10 | "version": "1.5.2", 11 | "author": { 12 | "name": "Sunny Walker", 13 | "url": "http://www.miraclesalad.com/" 14 | }, 15 | "licenses": [ 16 | { 17 | "type": "MIT", 18 | "url": "https://github.com/sunnywalker/jQuery.FilterTable/blob/master/MIT-LICENSE.txt" 19 | } 20 | ], 21 | "bugs": "https://github.com/sunnywalker/jQuery.FilterTable/issues", 22 | "homepage": "http://sunnywalker.github.io/jQuery.FilterTable/", 23 | "docs": "http://sunnywalker.github.io/jQuery.FilterTable/", 24 | "demo": "http://sunnywalker.github.io/jQuery.FilterTable/filtertable-quick.html", 25 | "dependencies": { 26 | "jquery": ">=1.4" 27 | } 28 | } -------------------------------------------------------------------------------- /jquery.filtertable.js: -------------------------------------------------------------------------------- 1 | /** 2 | * jquery.filterTable 3 | * 4 | * This plugin will add a search filter to tables. When typing in the filter, 5 | * any rows that do not contain the filter will be hidden. 6 | * 7 | * Utilizes bindWithDelay() if available. https://github.com/bgrins/bindWithDelay 8 | * 9 | * @version v1.5.7 10 | * @author Sunny Walker, swalker@hawaii.edu 11 | * @license MIT 12 | */ 13 | (function ($) { 14 | var jversion = $.fn.jquery.split('.'), 15 | jmajor = parseFloat(jversion[0]), 16 | jminor = parseFloat(jversion[1]); 17 | // build the pseudo selector for jQuery < 1.8 18 | if (jmajor < 2 && jminor < 8) { 19 | // build the case insensitive filtering functionality as a pseudo-selector expression 20 | $.expr[':'].filterTableFind = function (a, i, m) { 21 | return $(a).text().toUpperCase().indexOf(m[3].toUpperCase().replace(/"""/g, '"').replace(/"\\"/g, "\\")) >= 0; 22 | }; 23 | // build the case insensitive all-words filtering functionality as a pseudo-selector expression 24 | $.expr[':'].filterTableFindAny = function (a, i, m) { 25 | // build an array of each non-falsey value passed 26 | var raw_args = m[3].split(/[\s,]/), 27 | args = []; 28 | $.each(raw_args, function (j, v) { 29 | var t = v.replace(/^\s+|\s$/g, ''); 30 | if (t) { 31 | args.push(t); 32 | } 33 | }); 34 | // if there aren't any non-falsey values to search for, abort 35 | if (!args.length) { 36 | return false; 37 | } 38 | return function (a) { 39 | var found = false; 40 | $.each(args, function (j, v) { 41 | if ($(a).text().toUpperCase().indexOf(v.toUpperCase().replace(/"""/g, '"').replace(/"\\"/g, "\\")) >= 0) { 42 | found = true; 43 | return false; 44 | } 45 | }); 46 | return found; 47 | }; 48 | }; 49 | // build the case insensitive all-words filtering functionality as a pseudo-selector expression 50 | $.expr[':'].filterTableFindAll = function (a, i, m) { 51 | // build an array of each non-falsey value passed 52 | var raw_args = m[3].split(/[\s,]/), 53 | args = []; 54 | $.each(raw_args, function (j, v) { 55 | var t = v.replace(/^\s+|\s$/g, ''); 56 | if (t) { 57 | args.push(t); 58 | } 59 | }); 60 | // if there aren't any non-falsey values to search for, abort 61 | if (!args.length) { 62 | return false; 63 | } 64 | return function (a) { 65 | // how many terms were found? 66 | var found = 0; 67 | $.each(args, function (j, v) { 68 | if ($(a).text().toUpperCase().indexOf(v.toUpperCase().replace(/"""/g, '"').replace(/"\\"/g, "\\")) >= 0) { 69 | // found another term 70 | found++; 71 | } 72 | }); 73 | return found === args.length; // did we find all of them in this cell? 74 | }; 75 | }; 76 | } else { 77 | // build the pseudo selector for jQuery >= 1.8 78 | $.expr[':'].filterTableFind = jQuery.expr.createPseudo(function (arg) { 79 | return function (el) { 80 | return $(el).text().toUpperCase().indexOf(arg.toUpperCase().replace(/"""/g, '"').replace(/"\\"/g, "\\")) >= 0; 81 | }; 82 | }); 83 | $.expr[':'].filterTableFindAny = jQuery.expr.createPseudo(function (arg) { 84 | // build an array of each non-falsey value passed 85 | var raw_args = arg.split(/[\s,]/), 86 | args = []; 87 | $.each(raw_args, function (i, v) { 88 | // trim the string 89 | var t = v.replace(/^\s+|\s$/g, ''); 90 | if (t) { 91 | args.push(t); 92 | } 93 | }); 94 | // if there aren't any non-falsey values to search for, abort 95 | if (!args.length) { 96 | return false; 97 | } 98 | return function (el) { 99 | var found = false; 100 | $.each(args, function (i, v) { 101 | if ($(el).text().toUpperCase().indexOf(v.toUpperCase().replace(/"""/g, '"').replace(/"\\"/g, "\\")) >= 0) { 102 | found = true; 103 | // short-circuit the searching since this cell has one of the terms 104 | return false; 105 | } 106 | }); 107 | return found; 108 | }; 109 | }); 110 | $.expr[':'].filterTableFindAll = jQuery.expr.createPseudo(function (arg) { 111 | // build an array of each non-falsey value passed 112 | var raw_args = arg.split(/[\s,]/), 113 | args = []; 114 | $.each(raw_args, function (i, v) { 115 | // trim the string 116 | var t = v.replace(/^\s+|\s$/g, ''); 117 | if (t) { 118 | args.push(t); 119 | } 120 | }); 121 | // if there aren't any non-falsey values to search for, abort 122 | if (!args.length) { 123 | return false; 124 | } 125 | return function (el) { 126 | // how many terms were found? 127 | var found = 0; 128 | $.each(args, function (i, v) { 129 | if ($(el).text().toUpperCase().indexOf(v.toUpperCase().replace(/"""/g, '"').replace(/"\\"/g, "\\")) >= 0) { 130 | // found another term 131 | found++; 132 | } 133 | }); 134 | // did we find all of them in this cell? 135 | return found === args.length; 136 | }; 137 | }); 138 | } 139 | // define the filterTable plugin 140 | $.fn.filterTable = function (options) { 141 | // start off with some default settings 142 | var defaults = { 143 | // make the filter input field autofocused (not recommended for accessibility) 144 | autofocus: false, 145 | 146 | // callback function: function (term, table){} 147 | callback: null, 148 | 149 | // class to apply to the container 150 | containerClass: 'filter-table', 151 | 152 | // tag name of the container 153 | containerTag: 'p', 154 | 155 | // jQuery expression method to use for filtering 156 | filterExpression: 'filterTableFind', 157 | 158 | // if true, the table's tfoot(s) will be hidden when the table is filtered 159 | hideTFootOnFilter: false, 160 | 161 | // class applied to cells containing the filter term 162 | highlightClass: 'alt', 163 | 164 | // don't filter the contents of cells with this class 165 | ignoreClass: '', 166 | 167 | // don't filter the contents of these columns 168 | ignoreColumns: [], 169 | 170 | // use the element with this selector for the filter input field instead of creating one 171 | inputSelector: null, 172 | 173 | // name of filter input field 174 | inputName: '', 175 | 176 | // tag name of the filter input tag 177 | inputType: 'search', 178 | 179 | // text to precede the filter input tag 180 | label: 'Filter:', 181 | 182 | // filter only when at least this number of characters are in the filter input field 183 | minChars: 1, 184 | 185 | // don't show the filter on tables with at least this number of rows 186 | minRows: 8, 187 | 188 | // HTML5 placeholder text for the filter field 189 | placeholder: 'search this table', 190 | 191 | // prevent the return key in the filter input field from trigger form submits 192 | preventReturnKey: true, 193 | 194 | // list of phrases to quick fill the search 195 | quickList: [], 196 | 197 | // class of each quick list item 198 | quickListClass: 'quick', 199 | 200 | // quick list item label to clear the filter (e.g., '× Clear filter') 201 | quickListClear: '', 202 | 203 | // tag surrounding quick list items (e.g., ul) 204 | quickListGroupTag: '', 205 | 206 | // tag type of each quick list item (e.g., a or li) 207 | quickListTag: 'a', 208 | 209 | // class applied to visible rows 210 | visibleClass: 'visible' 211 | }, 212 | // mimic PHP's htmlspecialchars() function 213 | hsc = function (text) { 214 | return text.replace(/&/g, '&').replace(/"/g, '"').replace(//g, '>'); 215 | }, 216 | // merge the user's settings into the defaults 217 | settings = $.extend({}, defaults, options); 218 | 219 | // handle the actual table filtering 220 | var doFiltering = function (table, q) { 221 | // cache the tbody element 222 | var tbody = table.find('tbody'); 223 | // if the filtering query is blank or the number of chars is less than the minChars option 224 | if (q === '' || q.length < settings.minChars) { 225 | // show all rows 226 | tbody.find('tr').show().addClass(settings.visibleClass); 227 | // remove the row highlight from all cells 228 | tbody.find('td').removeClass(settings.highlightClass); 229 | // show footer if the setting was specified 230 | if (settings.hideTFootOnFilter) { 231 | table.find('tfoot').show(); 232 | } 233 | } else { 234 | // if the filter query is not blank 235 | var all_tds = tbody.find('td'); 236 | // hide all rows, assuming none were found 237 | tbody.find('tr').hide().removeClass(settings.visibleClass); 238 | // remove previous highlights 239 | all_tds.removeClass(settings.highlightClass); 240 | // hide footer if the setting was specified 241 | if (settings.hideTFootOnFilter) { 242 | table.find('tfoot').hide(); 243 | } 244 | if (settings.ignoreColumns.length) { 245 | var tds = []; 246 | if (settings.ignoreClass) { 247 | all_tds = all_tds.not('.' + settings.ignoreClass); 248 | } 249 | tds = all_tds.filter(':' + settings.filterExpression + '("' + q + '")'); 250 | tds.each(function () { 251 | var t = $(this), 252 | col = t.parent().children().index(t); 253 | if ($.inArray(col, settings.ignoreColumns) === -1) { 254 | t.addClass(settings.highlightClass).closest('tr').show().addClass(settings.visibleClass); 255 | } 256 | }); 257 | } else { 258 | if (settings.ignoreClass) { 259 | all_tds = all_tds.not('.' + settings.ignoreClass); 260 | } 261 | // highlight (class=alt) only the cells that match the query and show their rows 262 | all_tds.filter(':' + settings.filterExpression + '("' + q + '")').addClass(settings.highlightClass).closest('tr').show().addClass(settings.visibleClass); 263 | } 264 | } 265 | // call the callback function 266 | if (settings.callback) { 267 | settings.callback(q, table); 268 | } 269 | }; // doFiltering() 270 | 271 | return this.each(function () { 272 | // cache the table 273 | var t = $(this), 274 | // cache the tbody 275 | tbody = t.find('tbody'), 276 | // placeholder for the filter field container DOM node 277 | container = null, 278 | // placeholder for the quick list items 279 | quicks = null, 280 | // placeholder for the field field DOM node 281 | filter = null, 282 | // was the filter created or chosen from an existing element? 283 | created_filter = true; 284 | 285 | // only if object is a table and there's a tbody and at least minRows trs and hasn't already had a filter added 286 | if (t[0].nodeName === 'TABLE' && tbody.length > 0 && (settings.minRows === 0 || (settings.minRows > 0 && tbody.find('tr').length >= settings.minRows)) && !t.prev().hasClass(settings.containerClass)) { 287 | // use a single existing field as the filter input field 288 | if (settings.inputSelector && $(settings.inputSelector).length === 1) { 289 | filter = $(settings.inputSelector); 290 | // container to hold the quick list options 291 | container = filter.parent(); 292 | created_filter = false; 293 | } else { 294 | // create the filter input field (and container) 295 | // build the container tag for the filter field 296 | container = $('<' + settings.containerTag + ' />'); 297 | // add any classes that need to be added 298 | if (settings.containerClass !== '') { 299 | container.addClass(settings.containerClass); 300 | } 301 | // add the label for the filter field 302 | container.prepend(settings.label + ' '); 303 | // build the filter field 304 | filter = $(''); 305 | // prevent return in the filter field from submitting any forms 306 | if (settings.preventReturnKey) { 307 | filter.on('keydown', function (ev) { 308 | if ((ev.keyCode || ev.which) === 13) { 309 | ev.preventDefault(); 310 | return false; 311 | } 312 | }); 313 | } 314 | } 315 | 316 | // add the autofocus attribute if requested 317 | if (settings.autofocus) { 318 | filter.attr('autofocus', true); 319 | } 320 | 321 | // does bindWithDelay() exist? 322 | if ($.fn.bindWithDelay) { 323 | // bind doFiltering() to keyup (delayed) 324 | filter.bindWithDelay('keyup', function () { 325 | doFiltering(t, $(this).val()); 326 | }, 200); 327 | } else { 328 | // just bind to onKeyUp 329 | // bind doFiltering() to keyup 330 | filter.bind('keyup', function () { 331 | doFiltering(t, $(this).val()); 332 | }); 333 | } 334 | 335 | // bind doFiltering() to additional events 336 | filter.bind('click search input paste blur', function () { 337 | doFiltering(t, $(this).val()); 338 | }); 339 | 340 | // add the filter field to the container if it was created by the plugin 341 | if (created_filter) { 342 | container.append(filter); 343 | } 344 | 345 | // are there any quick list items to add? 346 | if (settings.quickList.length > 0 || settings.quickListClear) { 347 | quicks = settings.quickListGroupTag ? $('<' + settings.quickListGroupTag + ' />') : container; 348 | // for each quick list item... 349 | $.each(settings.quickList, function (index, value) { 350 | // build the quick list item link 351 | var q = $('<' + settings.quickListTag + ' class="' + settings.quickListClass + '" />'); 352 | // add the item's text 353 | q.text(hsc(value)); 354 | if (q[0].nodeName === 'A') { 355 | // add a (worthless) href to the item if it's an anchor tag so that it gets the browser's link treatment 356 | q.attr('href', '#'); 357 | } 358 | // bind the click event to it 359 | q.bind('click', function (e) { 360 | // stop the normal anchor tag behavior from happening 361 | e.preventDefault(); 362 | // send the quick list value over to the filter field and trigger the event 363 | filter.val(value).focus().trigger('click'); 364 | }); 365 | // add the quick list link to the quick list groups container 366 | quicks.append(q); 367 | }); 368 | 369 | // add the quick list clear item if a label has been specified 370 | if (settings.quickListClear) { 371 | // build the clear item 372 | var q = $('<' + settings.quickListTag + ' class="' + settings.quickListClass + '" />'); 373 | // add the label text 374 | q.html(settings.quickListClear); 375 | if (q[0].nodeName === 'A') { 376 | // add a (worthless) href to the item if it's an anchor tag so that it gets the browser's link treatment 377 | q.attr('href', '#'); 378 | } 379 | // bind the click event to it 380 | q.bind('click', function (e) { 381 | e.preventDefault(); 382 | // clear the quick list value and trigger the event 383 | filter.val('').focus().trigger('click'); 384 | }); 385 | // add the clear item to the quick list groups container 386 | quicks.append(q); 387 | } 388 | 389 | // add the quick list groups container to the DOM if it isn't already there 390 | if (quicks !== container) { 391 | container.append(quicks); 392 | } 393 | } 394 | 395 | // add the filter field and quick list container to just before the table if it was created by the plugin 396 | if (created_filter) { 397 | t.before(container); 398 | } 399 | } 400 | }); // return this.each 401 | }; // $.fn.filterTable 402 | })(jQuery); 403 | -------------------------------------------------------------------------------- /jquery.filtertable.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * jquery.filterTable 3 | * 4 | * This plugin will add a search filter to tables. When typing in the filter, 5 | * any rows that do not contain the filter will be hidden. 6 | * 7 | * Utilizes bindWithDelay() if available. https://github.com/bgrins/bindWithDelay 8 | * 9 | * @version v1.5.7 10 | * @author Sunny Walker, swalker@hawaii.edu 11 | * @license MIT 12 | */ 13 | !function($){var e=$.fn.jquery.split("."),t=parseFloat(e[0]),i=parseFloat(e[1]);t<2&&i<8?($.expr[":"].filterTableFind=function(e,t,i){return $(e).text().toUpperCase().indexOf(i[3].toUpperCase().replace(/"""/g,'"').replace(/"\\"/g,"\\"))>=0},$.expr[":"].filterTableFindAny=function(e,t,i){var n=i[3].split(/[\s,]/),r=[];return $.each(n,function(e,t){var i=t.replace(/^\s+|\s$/g,"");i&&r.push(i)}),!!r.length&&function(e){var t=!1;return $.each(r,function(i,n){if($(e).text().toUpperCase().indexOf(n.toUpperCase().replace(/"""/g,'"').replace(/"\\"/g,"\\"))>=0)return t=!0,!1}),t}},$.expr[":"].filterTableFindAll=function(e,t,i){var n=i[3].split(/[\s,]/),r=[];return $.each(n,function(e,t){var i=t.replace(/^\s+|\s$/g,"");i&&r.push(i)}),!!r.length&&function(e){var t=0;return $.each(r,function(i,n){$(e).text().toUpperCase().indexOf(n.toUpperCase().replace(/"""/g,'"').replace(/"\\"/g,"\\"))>=0&&t++}),t===r.length}}):($.expr[":"].filterTableFind=jQuery.expr.createPseudo(function(e){return function(t){return $(t).text().toUpperCase().indexOf(e.toUpperCase().replace(/"""/g,'"').replace(/"\\"/g,"\\"))>=0}}),$.expr[":"].filterTableFindAny=jQuery.expr.createPseudo(function(e){var t=e.split(/[\s,]/),i=[];return $.each(t,function(e,t){var n=t.replace(/^\s+|\s$/g,"");n&&i.push(n)}),!!i.length&&function(e){var t=!1;return $.each(i,function(i,n){if($(e).text().toUpperCase().indexOf(n.toUpperCase().replace(/"""/g,'"').replace(/"\\"/g,"\\"))>=0)return t=!0,!1}),t}}),$.expr[":"].filterTableFindAll=jQuery.expr.createPseudo(function(e){var t=e.split(/[\s,]/),i=[];return $.each(t,function(e,t){var n=t.replace(/^\s+|\s$/g,"");n&&i.push(n)}),!!i.length&&function(e){var t=0;return $.each(i,function(i,n){$(e).text().toUpperCase().indexOf(n.toUpperCase().replace(/"""/g,'"').replace(/"\\"/g,"\\"))>=0&&t++}),t===i.length}})),$.fn.filterTable=function(e){var t={autofocus:!1,callback:null,containerClass:"filter-table",containerTag:"p",filterExpression:"filterTableFind",hideTFootOnFilter:!1,highlightClass:"alt",ignoreClass:"",ignoreColumns:[],inputSelector:null,inputName:"",inputType:"search",label:"Filter:",minChars:1,minRows:8,placeholder:"search this table",preventReturnKey:!0,quickList:[],quickListClass:"quick",quickListClear:"",quickListGroupTag:"",quickListTag:"a",visibleClass:"visible"},i=function(e){return e.replace(/&/g,"&").replace(/"/g,""").replace(//g,">")},n=$.extend({},t,e),r=function(e,t){var i=e.find("tbody");if(""===t||t.length0&&(0===n.minRows||n.minRows>0&&t.find("tr").length>=n.minRows)&&!e.prev().hasClass(n.containerClass)){if(n.inputSelector&&1===$(n.inputSelector).length?(s=$(n.inputSelector),a=s.parent(),c=!1):(a=$("<"+n.containerTag+" />"),""!==n.containerClass&&a.addClass(n.containerClass),a.prepend(n.label+" "),s=$(''),n.preventReturnKey&&s.on("keydown",function(e){if(13===(e.keyCode||e.which))return e.preventDefault(),!1})),n.autofocus&&s.attr("autofocus",!0),$.fn.bindWithDelay?s.bindWithDelay("keyup",function(){r(e,$(this).val())},200):s.bind("keyup",function(){r(e,$(this).val())}),s.bind("click search input paste blur",function(){r(e,$(this).val())}),c&&a.append(s),n.quickList.length>0||n.quickListClear){if(l=n.quickListGroupTag?$("<"+n.quickListGroupTag+" />"):a,$.each(n.quickList,function(e,t){var r=$("<"+n.quickListTag+' class="'+n.quickListClass+'" />');r.text(i(t)),"A"===r[0].nodeName&&r.attr("href","#"),r.bind("click",function(e){e.preventDefault(),s.val(t).focus().trigger("click")}),l.append(r)}),n.quickListClear){var o=$("<"+n.quickListTag+' class="'+n.quickListClass+'" />');o.html(n.quickListClear),"A"===o[0].nodeName&&o.attr("href","#"),o.bind("click",function(e){e.preventDefault(),s.val("").focus().trigger("click")}),l.append(o)}l!==a&&a.append(l)}c&&e.before(a)}})}}(jQuery); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jquery.filtertable", 3 | "version": "1.5.6", 4 | "description": "Live searching/filtering for HTML tables with optional quick search buttons.", 5 | "main": "jquery.filtertable.js", 6 | "directories": { 7 | "example": "examples" 8 | }, 9 | "scripts": { 10 | "test": "echo \"Error: no test specified\" && exit 1" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/sunnywalker/jQuery.FilterTable.git" 15 | }, 16 | "dependencies": { 17 | "jquery": ">=1.4" 18 | }, 19 | "keywords": [ 20 | "table", 21 | "search", 22 | "filter" 23 | ], 24 | "author": "Sunny Walker (http://www.miraclesalad.com/)", 25 | "license": "MIT", 26 | "bugs": { 27 | "url": "https://github.com/sunnywalker/jQuery.FilterTable/issues" 28 | }, 29 | "homepage": "http://sunnywalker.github.io/jQuery.FilterTable/" 30 | } 31 | --------------------------------------------------------------------------------