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>
<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/theme.blue.css">
<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>
            <th class="sorter-shortDate">Date</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>
            <th>Date</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>
            <td><em>11/01/2012 11:42</em><span class="label">[email protected]</span></td>
        </tr>
        <tr>
            <td>Student02</td>
            <td>Mathematics</td>
            <td>male</td>
            <td>90</td>
            <td>88</td>
            <td>100</td>
            <td>90</td>
            <td><em>10/02/2012 11:42</em><span class="label">[email protected]</span></td>
        </tr>
        <tr>
            <td>Student03</td>
            <td>Languages</td>
            <td>female</td>
            <td>85</td>
            <td>95</td>
            <td>80</td>
            <td>85</td>
            <td><em>9/03/2012 11:42</em><span class="label">[email protected]</span></td>
        </tr>
       ...

JavaScript

$('table').tablesorter({
    // *** Appearance ***
    theme: 'blue',

    widthFixed: true,
    
    // include zebra and any other widgets
    widgets: ['zebra'],
    // other options: "ddmmyyyy" & "yyyymmdd"
    dateFormat: "ddmmyyyy",
    
    textExtraction: {
        7: function(node, table, cellIndex) {
        alert($(node).find("em").text());
            return $(node).find("em").text();
        }
    },

    // These are detected by default,
    // but you can change or disable them
    headers: {
        7: {
            sorter: 'shortDate'
        }
    }

}).tablesorterPager({

    // target the pager markup - see the HTML block below
    container: $(".pager"),

    // use this format: "http:/mydatabase.com?page={page}&size={size}"
    // where {page} is replaced by the page number and {size} is replaced
    // by the number of records to show
    ajaxUrl: null,

    // process ajax so that the data object is returned along with
    // the total number of rows
    ajaxProcessing: function(ajax) {
        if (ajax && ajax.hasOwnProperty('data')) {
            // example ajax:
            // {
            //   "data" : [{ "ID": 1, "Name": "Foo", "Last": "Bar" }],
            //   "total_rows" : 100
            // }
            // return [ "data", "total_rows" ];
            return [ajax.data, ajax.total_rows];
        }
    },

    // output string - default is '{page}/{totalPages}';
    // possible variables:
    // {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
    output: '{startRow} to {endRow} ({totalRows})',

    // apply disabled classname to the pager arrows when the rows at
    // either extreme is visible - default is true
    updateArrows: true,

    // starting page of the pager (zero based index)
    page: 0,

    // Number of visible rows - default is 10
    size: 10,

    // if true, the table will remain the same height no matter
    // how many records are displayed. The space is made up by an empty
    // table row set to...