• In Updated v2.17.0, the filter_formatter column can also be referenced by using a jQuery selector (e.g. class name or ID).
  • As of tablesorter version 2.9+, this widget can no longer be applied to versions of tablesorter prior to version 2.8.
  • At this time, these widgets do not work with the sticky header widget.
  • This page shows you how to add a few default HTML5 elements to interact with the filter widget.
  • If the HTML5 elements are not supported by your browser, you'll just see an input.
  • Custom filter widget option filter_formatter was added in version 2.7.7.
  • jQuery v1.4.3+ required.

Demo

Rank (>=0)
Color
Name
Age
Total (>=0)
Discount
Date
(#000000)
1#ff0000Johnson25$5.9522%Jun 26, 2013 7:22 AM
11#00ff00Hibert12$2.995%Aug 21, 2013 12:21 PM
12#0000ffHenry51$42.2918%Oct 13, 2013 1:15 PM
51#00ff00Parker28$9.9920%Jul 6, 2013 8:14 AM
21#ffffffHood33$19.9925%Dec 10, 2012 5:14 AM
013#ff0000Kent18$15.8944%Jan 12, 2013 11:14 AM
005#00ff00Bruce45$153.1944%Jan 18, 2014 9:12 AM
10#000000Alex3$5.294%Jan 8, 2013 5:11 PM
16#ff0000Franco24$14.1914%Jan 14, 2014 11:23 AM
66#000000Evans22$13.1911%Jan 18, 2013 9:12 AM
100#ffffffBrenda18$55.2015%Feb 12, 2013 7:23 PM
55#000000Bronson65$123.0032%Jan 20, 2014 1:12 PM
9#000000Martha25$22.0917%Jun 11, 2013 10:55 AM

Page Header

<!-- jQuery UI for range slider -->
<link rel="stylesheet" href="css/jquery-ui.min.css">
<script src="js/jquery-ui-latest.min.js"></script>

<!-- tablesorter plugin -->
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script src="../js/jquery.tablesorter.widgets.js"></script>

<!-- filter formatter code -->
<link rel="stylesheet" href="../css/filter.formatter.css">
<script src="../js/jquery.tablesorter.widgets-filter-formatter.js"></script>

Javascript

$(function() {

$("table").tablesorter({
theme: 'blue',
// hidden filter input/selects will resize the columns, so try to minimize the change
widthFixed : true,
// initialize zebra striping and filter widgets
widgets: ["zebra", "filter", "stickyHeaders"],
widgetOptions : {
// Use the $.tablesorter.storage utility to save the most recent filters
filter_saveFilters : true,
// jQuery selector string of an element used to reset the filters
filter_reset : 'button.reset',
// add custom selector elements to the filter row
filter_formatter : {

// Rank
0 : function($cell, indx){
return $.tablesorter.filterFormatter.html5Range( $cell, indx, {
value: 0,
min: 0,
max: 100,
delayed: true,
valueToHeader: true,
compare : [ '=', '>=', '<=' ],
selected: 1
});
},

// Color
1 : function($cell, indx){
return $.tablesorter.filterFormatter.html5Color( $cell, indx, {
value: '#000000',
addToggle: true,
exactMatch: true,
valueToHeader: false
});
},

// Age
3: function($cell, indx){
return $.tablesorter.filterFormatter.html5Number( $cell, indx, {
value: 1,
min: 1,
max: 65,
delayed: true,
addToggle: true,
exactMatch: true,
compare: ''
});
},

// Total
4 : function($cell, indx){
return $.tablesorter.filterFormatter.html5Range( $cell, indx, {
value: 0,
min: 0,
max: 150,
delayed: true,
valueToHeader: true,
compare : '>='
});
},

// Discount
5: function($cell, indx){
return $.tablesorter.filterFormatter.html5Number( $cell, indx, {
value: 1,
min: 1,
max: 44,
delayed: true,
addToggle: false,
compare: [ '<=', '=', '>=' ],
selected: 2
});
}

}
}
});

});

HTML

<table class="tablesorter">
<thead>
<tr><th>Rank</th><th>Color</th><th>Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Date</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>#ff0000</td><td>Johnson</td><td>25</td><td>$5.95</td><td>22%</td><td>Jun 26, 2013 7:22 AM</td></tr>
<tr><td>11</td><td>#00ff00</td><td>Hibert</td><td>12</td><td>$2.99</td><td>5%</td><td>Aug 21, 2013 12:21 PM</td></tr>
<tr><td>12</td><td>#0000ff</td><td>Henry</td><td>51</td><td>$42.29</td><td>18%</td><td>Oct 13, 2013 1:15 PM</td></tr>
<tr><td>51</td><td>#00ff00</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2013 8:14 AM</td></tr>
<tr><td>21</td><td>#ffffff</td><td>Hood</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2012 5:14 AM</td></tr>
<tr><td>013</td><td>#ff0000</td><td>Kent</td><td>18</td><td>$15.89</td><td>44%</td><td>Jan 12, 2013 11:14 AM</td></tr>
<tr><td>005</td><td>#00ff00</td><td>Bruce</td><td>45</td><td>$153.19</td><td>44%</td><td>Jan 18, 2014 9:12 AM</td></tr>
<tr><td>10</td><td>#000000</td><td>Alex</td><td>3</td><td>$5.29</td><td>4%</td><td>Jan 8, 2013 5:11 PM</td></tr>
<tr><td>16</td><td>#ff0000</td><td>Franco</td><td>24</td><td>$14.19</td><td>14%</td><td>Jan 14, 2014 11:23 AM</td></tr>
<tr><td>66</td><td>#000000</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jan 18, 2013 9:12 AM</td></tr>
<tr><td>100</td><td>#ffffff</td><td>Brenda</td><td>18</td><td>$55.20</td><td>15%</td><td>Feb 12, 2013 7:23 PM</td></tr>
<tr><td>55</td><td>#000000</td><td>Bronson</td><td>65</td><td>$123.00</td><td>32%</td><td>Jan 20, 2014 1:12 PM</td></tr>
<tr><td>9</td><td>#000000</td><td>Martha</td><td>25</td><td>$22.09</td><td>17%</td><td>Jun 11, 2013 10:55 AM</td></tr>
</tbody>
</table>

Next up: UITheme widget - jQuery UI theme ››