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 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><a id="abc9" href="#abc9">abc 9</a>
            </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><a id="abc11" href="#abc11">abc 11</a>
            </td>
            <td>3</td>
            <td>Chimp</td>
            <td>http://www.ucla.edu/</td>
        </tr>
        <tr>
            <td>abc 2</td>
           ...

CSS

.spacer {
    height: 1000px;
}

JavaScript

$('table').tablesorter({
    widgets: ['zebra', 'stickyHeaders']
});


$('a').click(function () {
    if (this.hash !== "") {
        window.location.hash = this.hash;
        // find table that link is inside
        var $sticky, sHeight,
            $window = $(window),
            $table = $(this).closest('table');
        if ($table.length) {
            $sticky = $table[0].config.widgetOptions.$sticky,
            // get stickheader height + a little extra,
            // if the link is in a table & table has a stickyheader...
            sHeight = ($sticky.height() || 0) * 1.2;
            // move the anchor below the sticky header
            $window.scrollTop($window.scrollTop() - sHeight);
        }
        // prevent anchor from controlling the scrollTop
        return false;
    }
});