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">
<h3>Click on the "%" sign to sort the first column by percentages;<br>Click outside to sort by name</h3>

<table id="games">
    <thead>
        <tr>
            <th>Game <span class="percSort">&nbsp;%&nbsp;</span>

            </th>
            <th>Numeric</th>
            <th>Animals</th>
            <th>Sites</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th class="gamename">
                <div style="width:66%;background-color: hsla(84,100%,50%,0.7);"></div>
<span class="name">Super Awesome</span>

<span class="perc">66%</span>

            </th>
            <td>10</td>
            <td>Koala</td>
            <td>http://www.google.com</td>
        </tr>
        <tr>
            <th class="gamename">
                <div style="width:46%;background-color: hsla(34,100%,50%,0.7);"></div>
<span class="name">Sorta Awesome</span>

<span class="perc">46%</span>

            </th>
            <td>234</td>
            <td>Ox</td>
            <td>http://www.yahoo.com</td>
        </tr>
        <tr>
            <th class="gamename">
                <div...

CSS

.tablesorter tbody th {
    background-color: transparent;
}
tbody th div {
    height: 2px;
}
.percSort {
    position: relative;
}
.percSort.active {
    color: white;
}

JavaScript

$(function () {

    var $cell;
    $('#games').tablesorter({
        theme: 'blue',
        textExtraction: {
            0: function (node, table, cellIndex) {
                var $n = $(node);
                // add semi-colon between values
                return $n.find('.name').text() + ';' + $n.find('.perc').text();
            }
        },
        textSorter: function (a, b) {
            var x = a.split(';'),
                y = b.split(';'),
                i = $cell && $cell.is('.active') ? 1 : 0;
            return $.tablesorter.sortNatural($.trim(x[i]), $.trim(y[i]));
        },
        initialized: function () {
            $cell = $('#games').find('.percSort');
            $cell.click(function () {
                // activate percentage sort
                $cell.addClass('active');
                return false;
            }).closest('th').click(function () {
                // clicking on header outside of percSort
                // inactivates the percentage sort
                $cell.removeClass('active');
            });

        }
    });

});