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.
  • Using the filters:
    TypeDescriptionExample
    textAny text entered in the filter will match text found within the columnabc (finds "abc", "abcd", "abcde", etc)
    "To exactly match the search query, add a quote, apostrophe or equal sign to the beginning and/or end of the queryabc" or abc= (exactly match "abc")
    ?Wildcard for a single, non-space character.J?n (finds "Jan" and "Jun", but not "Joan")
    *Wildcard for none, or multiple non-space characters.B*k (matches "Black" and "Book")
    /\d/Add any regex to the query to use in the query/b[aeiou]g/i (finds "bag", "beg", "BIG", "Bug", etc)
    < <= >= >Find alphabetical or numerical values less than or greater than or equal to the filtered query>= 10 (find values greater than or equal to 10)
    !Not operator. Filter the column with content that do not match the query.!fe (hide rows with "female" in that column, but shows rows with "male")
     &&  or  AND Logical "and". Filter the column for content that matches text from either side of the operator.box && bat (matches a column cell that contains both "box" and "bat")
    | or  OR Logical "or" (Vertical bar). Filter the column for content that matches text from either side of the bar.box|bat (matches a column cell with either "box" or "bat")
     -  or  to Find a range of values. Make sure there is a space before and after the dash (or the word "to").10 - 30 or 10 to 30 (match values between 10 and 30)
    * Note: You cannot combine these operators with each other (except for the wildcards).

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.
  • filter_serversideFiltering : false - if true, server-side filtering should be performed because client-side filtering will be disabled, but the ui and events will still be used.

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

Moved to the wiki pages - filter change log.

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 custom filter widget ››