Notes

  • Hover over the grey bar below the table header to open the filter row. Disable this by setting filter_hideFilters option to false.
  • This widget uses jQuery's .nextUntil() function which is only available is jQuery version 1.4+.
  • This widget does work with tablesorter v2.0.5.

Options

Filter widget defaults (added inside of tablesorter widgetOptions)

  • filter_childRows : false - if true, filter includes child row content in the search.
  • filter_columnFilters : true - if true, a filter will be added to the top of each table column.
  • filter_cssFilter : 'tablesorter-filter' - css class name added to the filter row & each input in the row.
  • filter_functions : null - add custom filter functions using this option.
  • filter_hideFilters : false - if true, filters are hidden initially, but can be revealed by clicking on the filter icon.
  • filter_ignoreCase : true - if true, make all searches case-insensitive.
  • filter_reset : null - jQuery selector string of an element used to reset the filters.
  • filter_searchDelay : 300 - typing delay in milliseconds before starting a search.
  • filter_startsWith : false - if true, filter start from the beginning of the cell contents.
  • filter_useParsedData : false - filter all data using parsed content.

Classes

  • filter-false - disable the filter for a specific header column.
  • filter-select - build a default select box for a column (shows unique column content). See the custom filter widget demo for an example.
  • filter-match - only applies to "filter-select" columns. Makes the select match the column contents instead of exactly matching.
  • filter-parsed - set a column to filter through parsed data instead of the actual table cell content.

Changes

v2.4

  • Added the ability to enter operators into the filter. Added < <= >= > ! =
    • Click any of the following buttons to perform a search in the table below. Click and scroll down!
    • To find values greater than 10, enter >10.
    • To find letters less than M, enter , but to find letters greater than M, enter , because will include ma because ma > m.
    • To find people that don't have "son" in their name, enter or to only look for males, enter !female.
    • Exact matches can be done using quotes, as before, or by using an equal sign =, e.g. find the exact number 10 by using .
    • Note #1 In currency, percent or other numerical columns with numbers, the operators will ignore these extra symbols when parsing the value. So to find values greater than 30%, ignore the percent sign and use .
    • Note #2 when using any of the above operators, the child row content is ignored even if filter_childRows is set to true.
  • Added "filterStart" and "filterEnd" triggered events on the table. This is used by the updated pager plugin to allow it to work with the filter widget.
  • Added filter_columnFilters option which when true will add a filter to each column. If false, no filter row is added.
  • Added filter_reset option which will contain a jQuery selector pointing to a reset element (button or link).
  • Added filter_useParsedData option
    • When true, ALL filter searches will only use parsed data.
    • To only use parsed data in specific columns, set this option to false and use any of the following (they all do the same thing), set in order of priority:
      • jQuery data data-filter="parsed".
      • metadata class="{ filter: 'parsed'}". This requires the metadata plugin.
      • headers option headers : { 0 : { filter : 'parsed' } }.
      • header class name class="filter-parsed".
    • Remember that parsed data most likely doesn't match the actual table cell text, 20% becomes 20 and Jan 1, 2013 12:01 AM becomes 1357020060000.
  • Added a method to apply a filter to the table when filter_columnFilters is false by triggering a search on the table.

    Search by columns

    // *** applies to both basic & advanced filter widgets ***
// search using an array - the index of the array matches the column index
// [ column0, column1, column2, ..., columnN ]
var columns = []; // undefined array elements are treated as an empty search ''
columns[4] = '2?%'; // is equivalent to defining the array this way [ '', '', '', '2?%' ]
$('table').trigger('search', [columns]);

v2.3.6

  • Include filter input boxes placeholder text by adding data-placeholder to the column header cell; e.g. data-placeholder="First Name". See the examples in the HTML code block below.
  • Exact match added. Add a quote (single or double) to the end of the string to find an exact match. In the first column enter Clark" to only find Clark and not Brandon Clark.
  • Wild cards added:
    • ? (question mark) finds any single non-space character.
      In the discount column, adding 2?% in the filter will find all percentages between "10%" and "19%". In the last column, J?n will find "Jun" and "Jan".
    • * (asterisk) finds multiple non-space characters.
      In the first column below Enter B* will find multiple names starting with "B". Now add a space at the end, and "Bruce" will not be included in the results.
  • Regex method added.
    • Use standard regex within the filter to filter the columns.
    • For example enter /20[1-9]\d/ or /20[^0]\d/ in the last column to find all dates greater than 2009.
    • Another example would be to switch the filter_ignoreCase value to false and then enter /JAN/i to find "Jan" with a case-insenstive regex flag.
  • Added filter_functions option which allows you to add a custom filter function for a column or to a dropdown list. Please see the jQuery filter widget, advanced demo for more details.

v2.3.4

  • Added widgetOptions.filter_ignoreCase option which makes the search case-insensitive, when true.
  • Added widgetOptions.filter_searchDelay option which delays the search giving the user time to type in the search string.

v2.3

The filter widget can be disabled using any of the following methods (they all do the same thing), in order of priority:
  • jQuery data data-filter="false".
  • metadata class="{ filter: false }". This requires the metadata plugin.
  • headers option headers : { 0 : { filter: false } }.
  • header class name class="filter-false".
  • As of this version, this widget can no longer be applied to the original plugin.. Fixed in v2.3.3.

v2.1

  • Replaced widgetFilterChildRows option with widgetOptions.filter_childRows.
  • Added widgetOptions.filter_startsWith option which when true, allows you to search the table from the starting of the table cell text. Use the toggle button to see the difference, and that it can be dynamically changed!.
  • Added widgetOptions.filter_cssFilter option which allows you to defined the css class applied to the filter row and each search input.
  • Additional filter widget specific options are included in the javascript below, with explanations.
  • Please note that using the pager plugin with this filter widget will have unexpected results - I haven't found a fix for this problem.

v2.0.19.1

  • A filter header option and header class name check was added to allow disabling the filter in a specific column.

Demo

filter_startsWith : false (if true, search from beginning of cell content only)
filter_ignoreCase : true (if false, the search will be case sensitive)
(search the Discount column for "2?%")
Rank First Name Last Name Age Total Discount Date
1 Philip Aaron Johnson Sr Esq 25 $5.95 22% Jun 26, 2004 7:22 AM
11 Aaron Hibert 12 $2.99 5% Aug 21, 2009 12:21 PM
12 Brandon Clark Henry Jr 51 $42.29 18% Oct 13, 2000 1:15 PM
111 Peter Parker 28 $9.99 20% Jul 6, 2006 8:14 AM
21 John Hood 33 $19.99 25% Dec 10, 2002 5:14 AM
013 Clark Kent Sr. 18 $15.89 44% Jan 12, 2003 11:14 AM
005 Bruce Almighty Esq 45 $153.19 44% Jan 18, 2021 9:12 AM
10 Alex Dumass 13 $5.29 4% Jan 8, 2012 5:11 PM
16 Jim Franco 24 $14.19 14% Jan 14, 2004 11:23 AM
166 Bruce Lee Evans 22 $13.19 11% Jan 18, 2007 9:12 AM
100 Brenda Lee McMasters 18 $55.20 15% Feb 12, 2010 7:23 PM
55 Dennis Bronson 65 $123.00 32% Jan 20, 2001 1:12 PM
9 Martha delFuego 25 $22.09 17% Jun 11, 2011 10:55 AM

Page Header

<!-- blue theme stylesheet -->
<link rel="stylesheet" href="../css/theme.blue.css">
<!-- tablesorter plugin -->
<script src="../js/jquery.tablesorter.js"></script>

<!-- tablesorter widget file - loaded after the plugin -->
<script src="../js/jquery.tablesorter.widgets.js"></script>

Javascript





CSS




/* filter row */
.tablesorter-filter-row td {
  background: #eee;
  line-height: normal;
  text-align: center; /* center the input */
  -webkit-transition: line-height 0.1s ease;
  -moz-transition: line-height 0.1s ease;
  -o-transition: line-height 0.1s ease;
  transition: line-height 0.1s ease;
}
/* optional disabled input styling */
.tablesorter-filter-row .disabled {
  opacity: 0.5;
  filter: alpha(opacity=50);
  cursor: not-allowed;
}

/* hidden filter row */
.tablesorter-filter-row.hideme td {
  /*** *********************************************** ***/
  /*** change this padding to modify the thickness     ***/
  /*** of the closed filter row (height = padding x 2) ***/
  padding: 2px;
  /*** *********************************************** ***/
  margin: 0;
  line-height: 0;
  cursor: pointer;
}
.tablesorter-filter-row.hideme .tablesorter-filter {
  height: 1px;
  min-height: 0;
  border: 0;
  padding: 0;
  margin: 0;
  /* don't use visibility: hidden because it disables tabbing */
  opacity: 0;
  filter: alpha(opacity=0);
}

/* filters */
.tablesorter-filter {
  width: 95%;
  height: inherit;
  margin: 4px;
  padding: 4px;
  background-color: #fff;
  border: 1px solid #bbb;
  color: #333;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: height 0.1s ease;
  -moz-transition: height 0.1s ease;
  -o-transition: height 0.1s ease;
  transition: height 0.1s ease;
}




HTML











Next up: jQuery filter widget, advanced ››