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.
  • 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 filter widget, advanced ››