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 id="games" class="tablesorter">
    <thead>
        <tr>
            <th id="thgame">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: hsla(94,100%,50%,0.7);"></div>
<span class="name">Mind Numbing</span>

<span...

CSS

.tablesorter tbody th {
    background-color: transparent;
}
tbody th div {
    height: 2px;
}
.sorter-perc .percSort {
    color: white;
}

JavaScript

// Add custom table parser for percentage.
$.tablesorter.addParser({
    id: 'perc',
    format: function (s, table, cell, cellIndex) {
        return $(cell).find('.perc').text().slice(0, -1);
    },
    type: 'numeric'
});

// Create tablesorter and disable default sorting for column.
$('#games').tablesorter({
    theme: 'blue'
});
$('#thgame').unbind();

// Create custom sorting events for column.
$('#thgame').click(function () {
    $('#thgame').removeClass('sorter-perc');
    $('#games').trigger('updateRows');
    $('#games').trigger('sorton', [[ [0, 'n'] ]]);
});
$('.percSort').click(function (e) {
    $('#thgame').addClass('sorter-perc');
    $('#games').trigger('updateRows');
    $('#games').trigger('sorton', [[ [0, 'n'] ]]);
    e.stopPropagation() // prevent previous event from firing.
});