Tablesorter demo

All options included, as well as the uitheme widget

by Mottie

HTML

<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/blue/style.css">
<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>
<button>Update</button><br>
<br>

<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 2</td><td>56</td><td>Elephant</td><td>http://www.wikipedia.org/</td></tr>
    </tbody>
</table>

CSS

/* This class is added to the span wrapping the
   header text using the "onRenderHeader" option */
.roundedCorners {
    border: #777 1px solid;
    padding: 0 10px;
    border-radius: 1em;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
}

JavaScript

$('table').tablesorter({
    sortList: [[1,0]]
});


$('button').click(function() {

    var tbl = '<tr><td>abc 9</td><td>155</td><td>Lion</td><td>http://www.nytimes.com/</td></tr>' +
        '<tr><td>ABC 10</td><td>87</td><td>Zebra</td><td>http://www.google.com</td></tr>' +
        '<tr><td>zyx 1</td><td>999</td><td>Koala</td><td>http://www.mit.edu/</td></tr>' +
        '<tr><td>zyx 12</td><td>0</td><td>Llama</td><td>http://www.nasa.gov/</td></tr>';

    var sorting = $('table')[0].config.sortList;

    $('table').find('tbody').html(tbl);
    $('table')
        .trigger('update')
        .trigger('sorton', [sorting]);

});