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>
            <th class="filter-select filter-match">profession</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Carl</td>
            <td>
                <ul>
                    <li>Builder</li>
                    <li>Professor</li>
                </ul>
            </td>
        </tr>
        <tr>
            <td>Lisa</td>
            <td>
                <ul>
                    <li>Programmer</li>
                    <li>Professor</li>
                    <li>Artist</li>
                </ul>
            </td>
        </tr>
        <tr>
            <td>Mark</td>
            <td>
                <ul>
                    <li>Pastry chef</li>
                    <li>Artist</li>
                </ul>
            </td>
        </tr>
    </tbody>
</table>

JavaScript

$(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 carriage returns; split into two separate professions
                    if (/\n/.test(n)) {
                        n = n.split(/\n/);
                    }
                    arry.push(n);
                });
                // flatten array
                return $.map(arry, function(n){ return n; });
            }
        }
    });

});