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>
              <span class="sort" data-index="0">Data 1</span> | 
              <span class="sort" data-index="1">Data 2</span> | 
              <span class="sort" data-index="2">Data 3</span>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr><td>Text 1 | Text H | Data 5</td></tr>
        <tr><td>Text 3 | Text F | Data 3</td></tr>
        <tr><td>Text 2 | Text G | Data 1</td></tr>
        <tr><td>Text 5 | Text B | Data 2</td></tr>
        <tr><td>Text 8 | Text E | Data 6</td></tr>
        <tr><td>Text 6 | Text C | Data 4</td></tr>
        <tr><td>Text 7 | Text D | Data 8</td></tr>
        <tr><td>Text 9 | Text A | Data 7</td></tr>
    </tbody>
</table>

CSS

/* See http://stackoverflow.com/q/36060289/145346 */
.tablesorter tbody th {
    background-color: transparent;
}
tbody th div {
    height: 2px;
}
th .active {
    color: white;
}

JavaScript

$(function () {

    var $cell;
    $('table').tablesorter({
        theme: 'blue',
        textSorter: function (a, b) {
            var x = a.split('|'),
                y = b.split('|'),
                i = $cell.filter('.active').attr('data-index');
            return $.tablesorter.sortNatural($.trim(x[i]), $.trim(y[i]));
        },
        initialized: function () {
            $cell = $('table thead th').find('span');
            $cell.click(function () {
                // activate percentage sort
                $(this)
                	.addClass('active')
                  .siblings()
                  .removeClass('active');
                return false;
            });

        }
    });

});