Tablesorter demo

All options included, as well as the uitheme widget

by Mottie

HTML

<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/ui/style.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.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>
<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>
        <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>
    </tbody>
</table>

CSS

/* This class is added to the span wrapping the
   header text using the "onRenderHeader" option */
.headerSpan {
   font-style: italic;
}

JavaScript

$('table').tablesorter({
    // *** Appearance ***
    // fix the column widths
    widthFixed : true,
    // include zebra and any other widgets, options:
    // 'uitheme', 'filter', 'stickyHeaders' & 'resizable'
    // the 'columns' widget will require custom css for the
    // primary, secondary and tertiary columns
    widgets    : [ 'uitheme', '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...