tablesorter

Filter Widget

Flexible client-side table sorting

NOTE!

• In version 2.3.6, these changes were made:
  • 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 1?% 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 Br* will find multiple names starting with "Br". 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.
  • 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.
• In version 2.0.19.1, a filter header option and header class name check was added to allow disabling the filter in a specific column.
• In versions 2.3+, the filter widget can be disabled using any of the following methods, 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".
• Replaced widgetFilterChildRows option with widgetOptions.filter_childRows (v2.1).
• 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! (v2.1).
• Added widgetOptions.filter_cssFilter option which allows you to defined the css class applied to the filter row and each search input. (v2.1).
• Added widgetOptions.filter_ignoreCase option which makes the search case-insensitive, when true. New! v2.3.4
• Added widgetOptions.filter_searchDelay option which delays the search giving the user time to type in the search string. New! v2.3.4
• 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.
• This widget uses jQuery's .nextUntil() function which is only available is jQuery version 1.4+.
• As of tablesorter version 2.3, this widget can no longer be applied to the original plugin.. Fixed in v2.3.3.

Demo

Page Header

<!-- blue theme stylesheet -->
<link rel="stylesheet" href="../css/blue/style.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 widget, added to style.css themes */
table.tablesorter thead tr.filters input {
	width: 95%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
table.tablesorter thead tr.filters, table.tablesorter thead tr.filters td {
	text-align: center;
	background: #fff;
}
/* optional disabled input styling */
table.tablesorter thead tr.filters input.disabled {
	opacity: 0.5;
	filter: alpha(opacity=50);
}

HTML