tablesorter

Filter Widget

Flexible client-side table sorting

NOTE!

• This widget can be applied to the original plugin. The code is in the "jquery.tablesorter.widgets.js" file.
• Added filter header option and class name to allow disabling the filter in a specific column in v2.0.19.1.
• The Discount column has the "filter-false" class added to the header - see the HTML on how to add this ability.
• The Date column has the "headers" option applied to disable the sort and the filter - see the table options in the javascript for this example.
• Replaced widgetFilterChildRows option with widgetOptions.filter_childRows. New! 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! New! v2.1
• Added widgetOptions.filter_cssFilter option, which allows you to defined the css class applied to the filter row and each search input. New! v2.1
• Additional filter widget specific options are included in the javascript below, with an explanation.
• Please note that using the pager plugin with this filter widget will have unexpected results - I haven't figured out how to fix the problem.

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