th.headerSortUp {
  background-image: url(../img/small_asc.gif);
  background-color: #3399FF;
}

th.headerSortDown {
  background-image: url(../img/small_desc.gif);
  background-color: #3399FF;
}

th.header {
  background-image: url(../img/small.gif);
  cursor: pointer;
  font-weight: bold;
  background-repeat: no-repeat;
  background-position: center left;
  padding-left: 20px;
  border-right: 1px solid #dad9c7;
  margin-left: -1px;
}

• "mmddyyyy" (default)
• "ddmmyyyy"
• "yyyymmdd"

In previous versions, this option was set as "us", "uk" or "dd/mm/yy". This option was modified to better fit needed date formats. It will only work with four digit years!

The sorter should be set to "shortDate" and the date format can be set in the "dateFormat" option or set for a specific columns within the "headers" option. See the demo page to see it working.

$(function(){
  $("table").tablesorter({

    dateFormat : "mmddyyyy", // default date format

    // or to change the format for specific columns,
    // add the dateFormat to the headers option:
    headers: {
      0: { sorter: "shortDate" }, // "shortDate" with the default dateFormat above
      1: { sorter: "shortDate", dateFormat: "ddmmyyyy" }, // day first format
      2: { sorter: "shortDate", dateFormat: "yyyymmdd" }  // year first format
    }

  });
});

For example, to disable sorting on the first two columns of a table: headers: { 0: { sorter: false}, 1: {sorter: false} }.

The plugin attempts to detect the type of data that is contained in a column, but if it can't figure it out then it defaults to alphanumeric. You can easily override this by setting the header argument (or column parser). See the full list of default parsers here or write your own.

$(function(){
  $("table").tablesorter({
    headers: {

      // See example - Disable first column
      0: { sorter: false },

      // See example 2: Sort column numerically & treat any text as if its value is:
      1: { sorter: "digit" },                 // zero
      2: { sorter: "digit", string: "max+" }, // maximum positive value
      3: { sorter: "digit", string: "max-" }, // maximum negative value

      // Sort the fifth column by date (e.g. mm/dd/yyyy if the date format is "us")
      4: { sorter: "shortDate" },

      // See example 3: lock the sort order
      // this option will not work if added as metadata
      5: { lockedOrder: "asc" },

      // See Example 4: Initial sort order direction of seventh column
      6: { sortInitialOrder: "desc" },

      // Set the filter to false to disable the filter widget in this column
      // See the "Applying the filter widget" demo
      7: { filter: false }

    }
  });
});

In versions 2.0.6+, all TH text is wrapped in a span by default. In the example below, the header cell (TH) span is given a class name (source).

$(function(){
  $("table").tablesorter({
    onRenderHeader: function (){
      $(this).find('span').addClass('roundedCorners');
    }
  });
});

and you'll end up with this HTML (only the thead is shown)

<thead>
  <tr>
    <th class="header"><span class="roundedCorners">Column 1</span></th>
    <th class="header"><span class="roundedCorners">Column 2</span></th>
  </tr>
</thead>

sorter: false	disable sort for this column.
sorter: "text"	Sort alpha-numerically.
sorter: "digit"	Sort numerically.
sorter: "currency"	Sort by currency value (supports "£$€").
sorter: "ipAddress"	Sort by IP Address.
sorter: "url"	Sort by url.
sorter: "isoDate"	Sort by ISO date (YYYY-MM-DD or YYYY/MM/DD).
sorter: "percent"	Sort by percent.
sorter: "usLongDate"	Sort by date (U.S. Standard, e.g. Jan 18, 2001 9:12 AM).
sorter: "shortDate"	Sort by a shorten date (see "dateFormat").
sorter: "time"	Sort by time (23:59 or 12:59 pm).
sorter: "metadata"	Sort by the sorter value in the metadata - requires the metadata plugin.

Check out the headers option to see how to use these parsers in your table (example #1).
Or add a header class name using "sorter-" plus the parser name (example #2), this includes custom parsers (example #3) New!.

For example, sortForce: [[0,0]] will sort the first column in ascending order. After the forced sort, the user selected column(s), or during initialzation, the sorting order defined in the sortList will follow. And lastly, the sort defined in the sortAppend option will be applied. More explicitly:

There are three options to determine the sort order and this is the order of priority:

1. sortForce forces the user to have this/these column(s) sorted first (null by default).
2. SortList is the initial sort order of the columns.
3. SortAppend is the default sort that is added to the end of the users sort selection (null by default).

The value of these sort options is an array of arrays and can include one or more columns. The format is an array of instructions for per-column sorting and direction in the format: [[columnIndex, sortDirection], ... ] where columnIndex is a zero-based index for your columns left-to-right and sortDirection is 0 for Ascending and 1 for Descending. A valid argument that sorts ascending first by column 1 and then column 2 looks like: [[0,0],[1,0]].

$(function(){
  $("table").tablesorter({
    sortForce  : [[0,0]],        // Always sort first column first
    sortList   : [[1,0], [2,0]], // initial sort columns (2nd and 3rd)
    sortAppend : [[3,0]]         // Always add this sort on the end (4th column)
  });
});

The value contains an array of instructions for per-column sorting and direction in the format: [[columnIndex, sortDirection], ... ] where columnIndex is a zero-based index for your columns left-to-right and sortDirection is 0 for Ascending and 1 for Descending. A valid argument that sorts ascending first by column 1 and then column 2 looks like: [[0,0],[1,0]]. Please see sortForce for more details on other sort order options.

For example, can be used to sort people alphabetically after some other user-selected sort that results in rows with the same value like dates or money due. It can help prevent data from appearing as though it has a random secondary sort.

The value contains an array of instructions for per-column sorting and direction in the format: [[columnIndex, sortDirection], ... ] where columnIndex is a zero-based index for your columns left-to-right and sortDirection is 0 for Ascending and 1 for Descending. A valid argument that sorts ascending first by column 1 and then column 2 looks like: [[0,0],[1,0]]. Please see sortForce for more details on other sort order options.

Change this option if you are not using the default css, or if you are using a completely custom stylesheet.

Complex can be slow in large tables so consider writing your own text extraction function "myTextExtraction" which you define like:

var myTextExtraction = function(node){
  // extract data from markup and return it
  // originally: return node.childNodes[0].childNodes[0].innerHTML;
  return $(node).text();
}
$(function(){
  $("#myTable").tableSorter( { textExtraction: myTextExtraction } );
});

tablesorter will pass a jQuery object containing the contents of the current cell for you to parse and return. Thanks to Josh Nathanson for the examples. Updated to a jQuery example by Rob G (Mottie).

Now if the text you are finding in the script above is say a number, then just include the headers sorter option to specify how to sort it. Also in this example, we will specify that the special textExtraction code is only needed for the second column ("1" because we are using a zero-based index). All other columns will ignore this textExtraction function.

$(function(){
  $("table").tablesorter({
    textExtraction: {
      1: function(node) {
           return $(node).find("span:last").text();
      }
    },
    headers: {
      1: { sorter : "digit" }
    }
  });
});

Use the "widgetZebra" option to change the css class name as follows:

$(function(){
  $("table").tablesorter({
    widgets: ["zebra"], // initialize zebra striping of the table
    widgetZebra: { css: [ "normal-row", "alt-row" ] }
  });
});

Use the "widgetColumns" option to change the css class name as follows:

$(function(){
  $("table").tablesorter({
    widgets: ["columns"], // initialize column styling of the table
    widgetColumns: { css: ["primary", "secondary", "tertiary" ] }
  });
});

Find more jQuery UI class names by hovering over the Framework icons on this page: http://jqueryui.com/themeroller/

Use the "widgetUitheme" option to change the css class name as follows:

$(function(){
  $("table").tablesorter({
    widgets: ["uitheme"], // initialize ui theme styling widget of the table
    widgetUitheme: {
      css: [
        "ui-icon-carat-2-n-s", // Unsorted icon
        "ui-icon-carat-1-s",   // Sort up (down arrow)
        "ui-icon-carat-1-n"    // Sort down (up arrow)
      ]
    }
  });
});

It does not work the same as "update" in that it only adds rows, it does not remove them.
Also, use this method to add table rows while using the pager plugin. If the "update" method is used, only the visible table rows continue to exist.

// Add multiple rows to the table
  var row = '<tr><td>Inigo</td><td>Montoya</td><td>34</td>' +
    '<td>$19.99</td><td>15%</td><td>Sep 25, 1987 12:00PM</td></tr>',
    $row = $(row);
  $('table')
    .find('tbody').append($row)
    .trigger('addRows', [$row]);

// Choose a new sort order
var sort = [[0,0],[2,0]];
// Note that the sort value below is inside of another array (inside another set of square brackets)
$("table").trigger("sorton", [sort]);

// Add new content
$("table tbody").append(html);

// let the plugin know that we made a update
$("table").trigger("update");

// As of version 2.0.14, the table will automatically resort (using the current sort selection)
// after the update, so include the following if you want to specify a different sort

// set sorting column and direction, this will sort on the first and third column
var sorting = [[2,1],[0,0]];
$("table").trigger("sorton", [sorting]);

Use this method when more than just one cell like in the "updateCell" method, but you may possibly have to trigger two events: both "update" and "appendCache".

Note: This is the only method the pager widget uses - the entire table is stored in the cache, but only the visible portion is actually exists in the table.

// Table data was just dynamically changed (more than one cell)
$(table)
  .trigger("update")
  .trigger("appendCache");

$(function() {
  $("table").tablesorter();

  $("td.discount").click(function(){

    // randomize a number
    var discount = '$' + Math.round(Math.random() * Math.random() * 100) + '.' +
     ('0' + Math.round(Math.random() * Math.random() * 100)).slice(-2);
    $(this).text(discount);

    // update the table, so the tablesorter plugin knows its value
    $("table").trigger("updateCell",[this]);

    // As of version 2.0.14, the table will automatically resort (using the current sort selection)
    // after the update, so include the following if you want to specify a different sort

    // set sorting column and direction, this will sort on the first and third column
    var sorting = [[3,1]];
    $("table").trigger("sorton",[sorting]);

    return false;
  });
});

$(function(){
  // initialize tablesorter without the widget
  $("table").tablesorter();

  // click a button to apply the zebra striping
  $("button").click(function(){
    $('table').trigger('applyWidgetId', ['zebra']);
});

// Update the list of widgets to apply to the table (add or remove)
  $("table").data("tablesorter").widgets = ["zebra"];

  // This method applies the widget - no need to keep updating
  $('table').trigger('applyWidgets');
}); 

$(function(){

  // initialize the tablesorter plugin
  $("table").tablesorter();

  // bind to sort events
  $("table")
    .bind("sortStart",function() {
      $("#overlay").show();
    })
    .bind("sortEnd",function() {
      $("#overlay").hide();
    });
});

$(function(){

  // initialize the tablesorter plugin
  $("table").tablesorter();

  // bind to sort events
  $("table")
    .bind("sortStart",function() {
      $("#overlay").show();
    })
    .bind("sortEnd",function() {
      $("#overlay").hide();
    });
});

$(function(){

  // initialize the sorter
  $("table")
    .tablesorter()

    // initialize the pager plugin
    .tablesorterPager({
      container: $("#pager")
    })

    // bind to pager events
    .bind('pagerChange pagerComplete', function(e,c){
      // c.totalPages contains the total number of pages
      $('#display').html( e.type + " event triggered, now on page " + (c.page + 1) );
    });

});

$(function(){

  // initialize the sorter
  $("table")
    .tablesorter()

    // initialize the pager plugin
    .tablesorterPager({
      container: $("#pager")
    })

    // bind to pager events
    .bind('pagerChange pagerComplete', function(e,c){
      // c.totalPages contains the total number of pages
      $('#display').html( e.type + " event triggered, now on page " + (c.page + 1) );
    });

});