NOTE!
- As of tablesorter version 2.3, this widget can no longer be applied to the original plugin. Get the "jquery.tablesorter.widgets.js" file from a version prior to 2.3 to get a widget that works with the original plugin.
- 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".
- jQuery data
- Replaced
widgetFilterChildRowsoption withwidgetOptions.filter_childRows. New! v2.1 - Added
widgetOptions.filter_startsWithoption, which whentrue, 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_cssFilteroption, 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.
- This widget uses jQuery's
.nextUntil()function which is only available is jQuery version 1.4+.
Demo
filter_startsWith : false (if true, search from beginning of cell content only)| First Name | Last Name | Age | Total | Discount | Date |
|---|---|---|---|---|---|
| Philip | Johnson | 25 | $5.95 | 22% | Jun 26, 2004 7:22 AM |
| Aaron | Hibert | 12 | $2.99 | 5% | Aug 21, 2009 12:21 PM |
| Brandon | Henry | 51 | $42.29 | 18% | Oct 13, 2000 1:15 PM |
| Peter | Parker | 28 | $9.99 | 20% | Jul 6, 2006 8:14 AM |
| John | Hood | 33 | $19.99 | 25% | Dec 10, 2002 5:14 AM |
| Clark | Kent | 18 | $15.89 | 44% | Jan 12, 2003 11:14 AM |
| Bruce | Almighty | 45 | $153.19 | 44% | Jan 18, 2001 9:12 AM |
| Bruce | Evans | 22 | $13.19 | 11% | Jan 18, 2007 9:12 AM |
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);
}