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>
<script src="http://mottie.github.com/tablesorter/addons/pager/jquery.tablesorter.pager.js"></script>
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/addons/pager/jquery.tablesorter.pager.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/blue/style.css">
<!-- pager --> 
<div class="pager"> 
    <img src="http://mottie.github.com/tablesorter/addons/pager/icons/first.png" class="first"/> 
    <img src="http://mottie.github.com/tablesorter/addons/pager/icons/prev.png" class="prev"/> 
    <span class="pagedisplay"></span> <!-- this can be any element, including an input --> 
    <img src="http://mottie.github.com/tablesorter/addons/pager/icons/next.png" class="next"/> 
    <img src="http://mottie.github.com/tablesorter/addons/pager/icons/last.png" class="last"/> 
    <select class="pagesize"> 
        <option selected="selected" value="10">10</option> 
        <option value="20">20</option> 
        <option value="30">30</option> 
        <option value="40">40</option> 
    </select> 
</div>

<table class="tablesorter">
    <thead>
        <tr>
            <th>Name</th>
            <th>Major</th>
            <th>Sex</th>
            <th>English</th>
            <th>Japanese</th>
            <th>Calculus</th>
            <th>Geometry</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Major</th>
            <th>Sex</th>
            <th>English</th>
            <th>Japanese</th>
            <th>Calculus</th>
            <th>Geometry</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Student01</td>
            <td>Languages</td>
            <td>male</td>
            <td>80</td>
            <td>70</td>
            <td>75</td>
            <td>80</td>
        </tr>
        <tr>
       ...

CSS

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

/* Add odd row color to uiwidget theme */
table.tablesorter tbody tr.odd td {
    background: #fff;
}

JavaScript

$('table').tablesorter({
    // *** Appearance ***
    // fix the column widths
    widthFixed: false,
    // include zebra and any other widgets
    widgets: ['zebra'],
    // other options: "ddmmyyyy" & "yyyymmdd"
    dateFormat: "mmddyyyy",

    // *** Functionality ***
    // starting sort direction "asc" or "desc"
    sortInitialOrder: "asc",
    // These are detected by default,
    // but you can change or disable them
    headers: {
        // set "sorter : false" (no quotes) to disable the column
        0: { sorter: "text" },
        1: { sorter: "digit" },
        2: { sorter: "text" },
        3: { sorter: "url" }
    },
    // extract text from the table - this is how is
    // it done by default
    textExtraction: {
        0: function(node) {
            return $(node).text();
        },
        1: function(node) {
            return $(node).text();
        }
    },
    // forces the user to have this/these column(s) sorted first
    sortForce: null,
    // initial sort order of the columns
    // [[columnIndex, sortDirection], ... ]
    sortList: [],
    // default sort that is added to the end of the users sort
    // selection.
    sortAppend: null,
    // Use built-in javascript sort - may be faster, but does not
    // sort alphanumerically
    sortLocaleCompare: false,
    // Setting this option to true will allow you to click on the
    // table header a third time to reset the sort direction.
    sortReset: false,
    // Setting this option to true will start the sort with the
    // sortInitialOrder when clicking on a previously unsorted column.
    sortRestart: false,
    // The key used to select more than one column for multi-column
    // sorting.
    sortMultiSortKey: "shiftKey",

    // *** Customize header ***
    onRenderHeader: function() {
        // the span wrapper is added by default
        $(this).find('span').addClass('roundedCorners');
    },
    // jQuery selectors used to find the header cells.
    selectorHeaders:...