Tablesorter demo

All options included, as well as the uitheme widget

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>

<small>* Animals Column is disabled</small>

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

$(function(){

// disable first and third columns using class names
$('table thead').find('th:eq(0), th:eq(2)').addClass('sorter-false');
    
$('table').tablesorter({

    // ********************** Appearance **********************
    widthFixed : false,
    widgets    : [ 'uitheme', 'zebra' ], // include zeba and uitheme widgets
    dateFormat : "us",

    // ********************** Functionality **********************
    // starting sort direction "asc" or "desc"
    sortInitialOrder : "asc",
    // These are detected by default,
    // but you can change or disable them
    headers : {
        //0: { sorter: "text" },
        //1: { sorter: "digit" },
        //2: { sorter: false },   // *** Disable Animals column ***
        //3: { sorter: "url" }
    },
    // extract text from the table - this is how is it done by default
    textExtraction : { // "simple",
        0: 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,
    sortMultiSortKey : "shiftKey",

    // ********************** Customize header **********************
    onRenderHeader  : function() {
        $(this).find('span').addClass('roundedCorners');
    },
    selectorHeaders : 'thead th',

    // ********************** css classes to use **********************
    widgetZebra : { css: ["even", "odd"] },
    cssAsc      : "headerSortUp",
    cssChildRow : "expand-child",
    cssDesc     : "headerSortDown",
    cssHeader   : "header",
    tableClass  : 'tablesorter',

    // ********************** prevent text selection in header **********************
    cancelSelection :...