• This page shows you how to add a few jQuery UI widgets to interact with the filter widget using the filter_formatter option.
  • Custom filter widget option filter_formatter was added in version 2.7.7.
  • This widget "should" work with tablesorter v2.0.5.
  • jQuery v1.4.3+ required.

Demo

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

Page Header

<!-- jQuery UI for range slider -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/cupertino/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.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() {

  // call the tablesorter plugin
  $("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"],
    widgetOptions : {
      // 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 : {
        0 : function($cell, indx){
          return $.tablesorter.filterFormatter.uiSlider( $cell, indx, {
            value: 0,
            min: 0,
            max: 100,
            delayed: true,
            valueToHeader: false
          });
        },
        3 : function($cell, indx){
          return $.tablesorter.filterFormatter.uiRange( $cell, indx, {
            values: [1, 70],
            min: 1,
            max: 70,
            delayed: true,
            valueToHeader: false
          });
        },
        5 : function($cell, indx){
          return $.tablesorter.filterFormatter.uiSpinner( $cell, indx, {
            min : 0,
            max : 45,
            value: 1,
            step: 1,
            delayed: true,
            addToggle: true,
            exactMatch: true,
            numberFormat: "n"
          });
        },
        6 : function($cell, indx){
          return $.tablesorter.filterFormatter.uiDatepicker( $cell, indx, {
            from : '12/1/2012', // default from date
            to   : '2/1/2014',  // default to date
            changeMonth: true,
            changeYear : true
          });
        },

        4 : function($cell, indx){
          return $.tablesorter.filterFormatter.uiRange( $cell, indx, {
            values: [1, 160],
            min: 1,
            max: 160,
            delayed: true,
            valueToHeader: false
          });
        }

      }
    }
  });

});

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>#00ffff</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>#ffff00</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>45%</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>45%</td>
      <td>Jan 18, 2014 9:12 AM</td>
    </tr>
    <tr>
      <td>10</td>
      <td>#00ffff</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>#ffff00</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>#ffff00</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: jQuery custom filter widget formatter (part 2) ››