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>Ascending sort on Text; Descending sort on percentage</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 style="width:77%;background-color:...

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, direction, columnIndex, table) {
            if (columnIndex === 0) {
                var c = table.config,
                    x = a.split(';'),
                    y = b.split(';'),
                    // sort column by percentage when descending sort is active
                    i = c.$headers.eq(0).hasClass('tablesorter-headerDesc') ? 1 : 0;
                return $.tablesorter.sortNatural($.trim(x[i]), $.trim(y[i]));
            } else {
                return $.tablesorter.sortNatural(a,b);
            }
        }
    });

});