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">
<div class="sorting">
    Sort Links:
    <a href="#" data-column="0" data-direction="0">AlphaNumeric</a>,&nbsp;
    <a href="#" data-column="1" data-direction="0">Numeric</a>,&nbsp;
    <a href="#" data-column="2" data-direction="0">Animals</a>,&nbsp;
    <a href="#" data-column="3" data-direction="0">Sites</a>
    - (keep clicking to toggle sort direction)
</div>

<table class="tablesorter">
    <thead>
        <tr>
            <th>AlphaNumeric</th>
            <th>Numeric</th>
            <th>Animals</th>
            <th>Sites</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>abc 123</td><td>10</td><td>Koala</td><td>http://www.google.com</td></tr>
        <tr><td>abc 1</td><td>234</td><td>Ox</td><td>http://www.yahoo.com</td></tr>
        <tr><td>abc 9</td><td>10</td><td>Girafee</td><td>http://www.facebook.com</td></tr>
        <tr><td>zyx 24</td><td>767</td><td>Bison</td><td>http://www.whitehouse.gov/</td></tr>
        <tr><td>abc 11</td><td>3</td><td>Chimp</td><td>http://www.ucla.edu/</td></tr>
        <tr><td>abc...

JavaScript

jQuery(document).ready(function() {
    
    var ts = $("table");
    // initialize tablesorter
    ts.tablesorter();
    
    $(".sorting a").click(function(){
        var $t = $(this),
            col = $t.attr('data-column'),
            dir = $t.attr('data-direction');
        // sort column in set direction
        ts.trigger('sorton', [ [[col, dir]] ]);
        // update to current data-direction
        $t.attr('data-direction', ( parseInt(dir,10)+1) % 2 );
        return false;
    });
    
});