Tablesorter demo

All options included, as well as the uitheme widget

HTML

<script src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.js"></script>
<script src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.default.css">
<select class="search" multiple>
    <option></option> <!-- empty option to clear filter -->
</select>

<table class="tablesorter"> 
  <thead> 
    <tr> 
      <th>First Name</th>
      <th>Last Name</th> 
      <th>City</th> 
      <th>Age</th> 
      <th data-placeholder="Select a filter">Total</th> 
      <th>Discount</th> 
      <th>Date</th> 
    </tr> 
  </thead> 
  <tbody> 
    <tr> 
      <td>Aaron</td> 
      <td>Johnson Sr</td> 
      <td>Atlanta</td> 
      <td>35</td> 
      <td>$5.95</td> 
      <td>22%</td> 
      <td>Jun 26, 2004 7:22 AM</td> 
    </tr> 
    <tr> 
      <td>Aaron</td> 
      <td>Johnson</td> 
      <td>Yuma</td> 
      <td>12</td> 
      <td>$2.99</td> 
      <td>5%</td> 
      <td>Aug 21, 2009 12:21 PM</td> 
    </tr> 
    <tr> 
      <td>Clark</td> 
      <td>Henry Jr</td> 
      <td>Tampa</td> 
      <td>51</td> 
      <td>$42.29</td> 
      <td>18%</td> 
      <td>Oct 13, 2000 1:15 PM</td> 
    </tr> 
    <tr> 
      <td>Peter</td> 
      <td>Henry</td> 
      <td>New York</td> 
      <td>28</td> 
      <td>$9.99</td> 
      <td>20%</td> 
      <td>Jul 6, 2006 8:14 AM</td> 
    </tr> 
    <tr> 
      <td>John</td> 
      <td>Hood</td> 
      <td>Boston</td> 
      <td>33</td> 
      <td>$19.99</td> 
      <td>25%</td> 
      <td>Dec 10, 2002 5:14 AM</td> 
    </tr> 
    <tr> 
      <td>Clark</td> 
      <td>Kent Sr</td> 
      <td>Los Angeles</td> 
      <td>18</td> 
      <td>$15.89</td> 
      <td>44%</td> 
      <td>Jan 12, 2003 11:14 AM</td> 
    </tr> 
    <tr> 
      <td>John</td> 
      <td>Kent Esq</td> 
      <td>Seattle</td> 
      <td>45</td> 
      <td>$153.19</td> 
      <td>44%</td> 
      <td>Jan 18, 2021 9:12 AM</td> 
    </tr> 
    <tr> 
     ...

JavaScript

var targetColumn = 3; // age column

$('table').tablesorter({
    widgets: ['zebra', 'filter'],
    widgetOptions: {
        filter_columnFilters : true
    },
    initialized : function(table) {
        // get all values from the age column
        var opts = $.tablesorter.filter.getOptionSource( table, targetColumn ),
        	html = '';
        $.each(opts, function(index, opt) {
        	html += '<option>' + opt.text + '</option>';
        });
        $('.search')
            .append(html)
            .on('change', function(){
                var filters = [];
                // set filter for "Age" column
                filters[targetColumn] = $(this).find(':selected').map(function(){
                    return this.value;
                }).get().join('|');
                if (filters.join('') !== '') {
                	$.tablesorter.setFilters( table, filters );
                } else {
                	$(table).trigger('filterReset');
                }
                
            });
    }
});