Tablesorter demo

All options included, as well as the uitheme widget

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>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>
       ...

CSS

.tablesorter .tablesorter-header {
    background-image: none;
    cursor: default;
}
.tablesorter-header span, .tablesorter .arrows {
    cursor: pointer;
}
.tablesorter-header .arrows {
    position: relative;
    float: right;
}
.tablesorter-header div.arrows i {
    position: absolute;
    right: 0;
    display: block;
    width: 15px;
    height: 15px;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: transparent;
}
.tablesorter-header i.tablesorter-headerAsc {
    top: -5px;
    background-image: url(http://mottie.github.io/tablesorter/css/images/black-asc.gif);
}
.tablesorter-header i.tablesorter-headerDesc {
    top: 5px;
    background-image: url(http://mottie.github.io/tablesorter/css/images/black-desc.gif);
}
.tablesorter-headerAsc i.tablesorter-headerAsc {
    background-image: url(http://mottie.github.io/tablesorter/css/images/white-asc.gif);
}
.tablesorter-headerDesc i.tablesorter-headerDesc {
    background-image: url(http://mottie.github.io/tablesorter/css/images/white-desc.gif);
}

JavaScript

$(function () {
    var $table = $('table');
    
    $table.tablesorter({
        theme: 'blue',
        headerTemplate: '<span>{content}</span>' +
            '<div class="arrows">' +
                '<i class="tablesorter-headerAsc"></i>' +
                '<i class="tablesorter-headerDesc"></i>' +
            '</div>',
        onRenderHeader: function (index) {
            $(this).find('.arrows i').click(function(){
                var direction = $(this).hasClass('tablesorter-headerAsc');
                $table.trigger('sorton', [ [[ index, direction ? 0 : 1 ]] ]);
            });
        },
        // you can still click on the header text to toggle the sort
        selectorSort: 'span'
    });
});