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;
}

• "us" (default) - "mm-dd-yyyy" or "mm/dd/yyyy"
• "uk" - "dd-mm-yyyy" or "dd/mm/yyyy"
• "dd/mm/yy" or "dd-mm-yy" - Sort by short year (it appears to sort by day first, not the year)

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).

$(function(){
  $("table").tablesorter({
    headers: {
      0: { sorter: false },      // disable first column
      1: { sorter: "digit" },    // sort second column numerically
      4: { sorter: "shortDate" } // sort the fifth column by date (e.g. mm/dd/yyyy if the date format is "us")
    }
  });
});

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.

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.

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" ] }
  });
});

// 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");

// 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]);

    // 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) );
    });

});