• 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 ››