Tablesorter demo

All options included, as well as the uitheme widget

by Dave Mednick

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.blue.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.dark.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.default.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.dropbox.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.green.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.grey.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.ice.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.black-ice.css">
<button data-index="0"> View All </button>
<button data-index="1"> &lt; $10 </button>
<button data-index="2"> $10 - $100 </button>
<button data-index="3"> &gt; $100 </button>

<table class="tablesorter"> 
  <thead> 
    <tr> 
      <th>First Name</th> <!-- add "filter-select" class or filter_functions : { 0: true } --> 
      <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> 
     ...

CSS

table.tablesorter .tablesorter-filter {
    display: none;
}

JavaScript

$('table').tablesorter({

    // include zebra and any other widgets, options:
    // 'columns', 'filter', 'stickyHeaders' & 'resizable'
    // 'uitheme' is another widget, but requires loading
    // a different skin and a jQuery UI theme.
    widgets: ['zebra', 'filter'],

    widgetOptions: {
        
        // Add select box to 4th column (zero-based index) 
        // each option has an associated function that returns a boolean 
        // function variables: 
        // e = exact text from cell 
        // n = normalized value returned by the column parser 
        // f = search filter input value 
        // i = column index 
        filter_functions: {
            // Add these options to the select dropdown (numerical comparison example) 
            4: {
                "< $10": function(e, n, f, i) {
                    return n < 10;
                },
                "$10 - $100": function(e, n, f, i) {
                    return n >= 10 && n <= 100;
                },
                "> $100": function(e, n, f, i) {
                    return n > 100;
                }
            }
        }
    },

    initialized: function(table) {
        // target select
        var i, o, select = $(table).find('select.tablesorter-filter');
        $('button').click(function() {
            i = $(this).data('index');
            select[0].options[i].selected = true;
            select.trigger('change');
        });
    }

});