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>One</th><th>Two</th><th>Three</th><th>Four</th><th>Five</th><th>Six</th><th>Seven</th><th>Eight</th></tr>
</thead>
<tbody>
<tr>
<td>1</td><td>Test 2</td><td>02.02.2011</td><td>-1,22</td><td class="warn">Test 2</td><td>Four</td><td>22.22</td><td>2012-05-04</td></tr>
<tr>
<td rowspan="2">7</td><td>Test 12</td><td>01.03.2011</td><td>-10,22</td><td class="bad">Test 3</td><td>One</td><td>12.22</td><td>2012-05-05</td></tr>
<tr>
<td>Test 4</td><td>01.02.2012</td><td>8,22</td><td class="info">Test 1</td><td>Two</td><td>8.22</td><td>2012-04-05</td></tr>
<tr>
<td>3</td><td>Test 333</td><td>01.02.2012</td><td>7,2</td><td class="bad">Test 2</td><td>Three</td><td>8.2</td><td>2011-05-05</td></tr>
<tr>
<td>1</td><td><span class="info">Test 2</span>
</td><td>02.02.2012</td><td>1,220</td><td class="good">Test 2</td><td>Four</td><td>1.2</td><td>2011-04-05</td></tr>
<tr>
<td rowspan="2">7</td><td>Test 12</td><td>01.03.2011</td><td>10,22</td><td class="bad">Test 23</td><td>One</td><td>5</td><td>2012-05-05</td></tr>
<tr>
<td>Test 4</td><td>01.02.2012</td><td>8,22</td><td...

JavaScript

$('table').tablesorter().bind("sortStart", function() {
    var hasRowspans = false;
    $('[rowspan]', this).each(function() {
        hasRowspans = true;
        var rowspan = parseInt($(this).attr('rowspan'));
        $(this).removeAttr('rowspan');
        var trIndex = $(this).parentsUntil('table').children('tr').index($(this).parent());
        var tdIndex = $(this).parent().children('td').index(this);
        for (var tr = trIndex + 1; tr < trIndex + rowspan; ++tr) {
            var $row = $(this).parentsUntil('table').children('tr').eq(tr);
            if (tdIndex == 0) $row.prepend($(this).clone());
            else $row.children('td').eq(tdIndex - 1).after($(this).clone());
        }
    });
    if (hasRowspans) $(this).trigger('update');
});