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">
<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">
<table>
    <thead>
        <tr>
            <th>name</th>
            <!-- these class names are important! -->
            <th class="filter-select filter-match">profession</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Carl</td>
            <td>
                <table class="tablesorter-blue">
                    <tr>
                        <td>Builder</td>
                    </tr>
                    <tr>
                        <td>Professor</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>Lisa</td>
            <td>
                <table class="tablesorter-blue">
                    <tr>
                        <td>Programmer</td>
                    </tr>
                    <tr>
                        <td>Professor</td>
                    </tr>
                    <tr>
                        <td>Artist</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>Mark</td>
            <td>
                <table...

JavaScript

/*
 Note: this method will not work as expected if you use HTML without whitespace
  (tabs/spaces/carriage returns) in the table cell content

 <tr>
    <td>Carl</td>
    <td>
        <table class="tablesorter-blue">
            <tr><td>Builder</td></tr><tr><td>Professor</td></tr>
        </table>
    </td>
 </tr>

 results in "BuilderProfessor" showing up as an option
*/

$(function () {

    $('table').tablesorter({
        theme: 'blue',
        widgets: ['filter'],
        widgetOptions: {
            filter_selectSource: function (table, column, onlyAvail) {
                // get an array of all table cell contents for a table column
                var arry = [],
                    array = $.tablesorter.filter.getOptions(table, column, onlyAvail);
                // split content if multiple professions are encountered
                $.each(array, function (i, n) {
                    // look for spaces/tabs/carriage returns;
                    // split into separate professions
                    if (/\s{2,}/.test(n)) {
                        n = n.split(/\s{2,}/);
                    }
                    arry.push(n);
                });
                // flatten array
                return $.map(arry, function (n) {
                    return n;
                });
            }
        }
    });

});