Tablesorter demo

All options included, as well as the uitheme widget

by Mottie

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">
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/redmond/jquery-ui.css">
<table class="tablesorter">
    <thead>
        <tr>
            <th class="filter-select filter-match">AlphaNumeric</th>
            <th>Numeric</th>
            <th>Animals</th>
            <th>Sites</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>abc 123</td>
            <td>10</td>
            <td>Koala</td>
            <td>http://www.google.com</td>
        </tr>
        <tr>
            <td>abc 1</td>
            <td>234</td>
            <td>Ox</td>
            <td>http://www.yahoo.com</td>
        </tr>
        <tr>
            <td>abc 9</td>
            <td>10</td>
            <td>Girafee</td>
            <td>http://www.facebook.com</td>
        </tr>
        <tr>
            <td>zyx 24</td>
            <td>767</td>
            <td>Bison</td>
            <td>http://www.whitehouse.gov/</td>
        </tr>
        <tr>
            <td>abc 11</td>
            <td>3</td>
            <td>Chimp</td>
            <td>http://www.ucla.edu/</td>
        </tr>
        <tr>
            <td>abc 2</td>
            <td>56</td>
            <td>Elephant</td>
            <td>http://www.wikipedia.org/</td>
        </tr>
        <tr>
            <td>abc 9</td>
            <td>155</td>
            <td>Lion</td>
            <td>http://www.nytimes.com/</td>
        </tr>
        <tr>
            <td>ABC 10</td>
            <td>87</td>
            <td>Zebra</td>
            <td>http://www.google.com</td>
        </tr>
        <tr>
            <td>zyx 1</td>
            <td>999</td>
            <td>Koala</td>
           ...

CSS

/*
    How to add jQuery selectmenu to the filter row
*/

JavaScript

$(function () {
    var $table = $('table');
    
    $table.tablesorter({
        theme: 'blue',
        widgets: ['zebra', 'filter'],
        widgetOptions: {
            // add "selectmenu" class name to first filter
            filter_cssFilter: ['selectmenu'],
            // change select options to just the prefix
            filter_selectSource: function(){
                // make sure to include "filter-match" class
                // otherwise you'll get no results (exact match is default)
                return ['abc', 'zyx'];
            }
        },
        initialized: function(){
            $table.find('.selectmenu').selectmenu({
                change: function(){
                    // start a new search
                    $table.trigger('search');
                }
            });
        }
    });
});