Tablesorter demo

All options included, as well as the uitheme widget

by meetravi

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 id="disputes-list-table" class="tablesorter">
             <thead>
                <tr class="tablesorter-headerRow">
                    <th data-column="0" class="tablesorter-header"><div class="tablesorter-header-inner">User Name<i class="tablesorter-icon"></i></div></th>
                    <th data-column="1" class="tablesorter-header"><div class="tablesorter-header-inner">Facebook ID<i class="tablesorter-icon"></i></div></th>
                    <th data-column="2" class="tablesorter-header"><div class="tablesorter-header-inner">Email<i class="tablesorter-icon"></i></div></th>
                    <th data-column="3" class="tablesorter-header"><div class="tablesorter-header-inner">Game<i class="tablesorter-icon"></i></div></th>
                    <th data-column="4" class="tablesorter-header"><div class="tablesorter-header-inner">Order ID<i class="tablesorter-icon"></i></div></th>
                    <th data-column="5" class="tablesorter-header"><div class="tablesorter-header-inner">Amount<i class="tablesorter-icon"></i></div></th>
                    <th data-column="6" class="tablesorter-header"><div class="tablesorter-header-inner">Status<i class="tablesorter-icon"></i></div></th>
                    <th class="sorter-shortDate tablesorter-header tablesorter-headerSortUp" data-column="7"><div class="tablesorter-header-inner">Received<i class="tablesorter-icon"></i></div></th>
                    <th class="sorter-false" data-column="8"><div...

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) {
            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: 30,

    // 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 a height to compensate; default is false
...