Example from the blue theme:

.tablesorter-blue .tablesorter-headerAsc {
  background-color: #9fbfdf;
  background-image: url(black-asc.gif);
}

Example from the blue theme:

.tablesorter-blue .tablesorter-headerDesc {
  background-color: #8cb3d9;
  background-image: url(black-desc.gif);
}

Example from the blue theme:

.tablesorter-blue .tablesorter-header {
  background-color: #99bfe6;
  background-repeat: no-repeat;
  background-position: center right;
  padding: 4px 20px 4px 4px;
  white-space: normal;
  cursor: pointer;
}

This CSS style was added in v2.4, prior to that the row would get the same class as the header cells. This class was added to make it easier to determine what element was being targeted in the plugin.

This class name is added to the header cell that is currently being sorted or filted. To prevent this class name from being added, set the showProcessing option to false (v2.4).

<tbody class="tablesorter-infoOnly">
  <tr>
    <th>The contents of this tbody</th>
  </tr>
  <tr>
    <td>will not be sorted</td>
  </tr>
</tbody>

NOTE! The pager plugin will only be applied to the first tbody, as always. I may work on modifying this behavior in the future, if I can figure out the best implementation.

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

$(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
    }

  });
});

• jQuery data data-dateFormat="mmddyyyy".
• metadata class="{ dateFormat: 'mmddyyyy'}". This requires the metadata plugin.
• headers option headers : { 0 : { dateFormat : 'mmddyyyy' } }.
• header class name class="dateFormat-mmddyyyy".
• Overall dateFormat option.

• bottom - sort empty table cells to the bottom.
• top - sort empty table cells to the top.
• none or zero - sort empty table cells as if the cell has the value equal to zero.

• jQuery data data-empty="top".
• metadata class="{ empty: 'top'}". This requires the metadata plugin.
• headers option headers : { 0 : { empty : 'top' } }.
• header class name class="empty-top".
• Overall emptyTo option.

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

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

      // See example 2: Sort column numerically & treat any text as if its value is:
      1: { sorter: "digit", empty:  "top" }, // zero; sort empty cells to the top
      2: { sorter: "digit", string: "max" }, // maximum positive value
      3: { sorter: "digit", string: "min" }, // maximum negative value

      // Sort the fifth column by date & set the format
      4: { sorter: "shortDate", dateFormat: "yyyymmdd" }, // year first format

      // 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 header cell
      6: { sortInitialOrder: "desc" },

      // Set filter widget options for this column
      // See the "Applying the filter widget" demo
      7: { filter: false },    // disable filter widget for this column
      8: { filter: "parsed" }, // use parsed data for this column in the filter search

      // Set resizable widget options for this column
      9: { resizable: false } // prevent resizing of header cell 9

    }
  });
});

<thead>
	<tr>
		<th colspan="4" data-column="0">header-index 0</th>
	</tr>
	<tr>
		<th data-column="0">header-index 1</th>
		<th data-column="1">header-index 2</th>
		<th data-column="2">header-index 3</th>
		<th data-column="3">header-index 4</th>
	</tr>
	<tr>
		<th colspan="2" data-column="0">header-index 5</th>
		<th colspan="2" data-column="2">header-index 6</th>
	</tr>
</thead>

$(function(){
  $("table").tablesorter({
    headerTemplate: '{content}',
    onRenderHeader: function (){
      $(this).find('div').addClass('roundedCorners');
    }
  });
});

<thead>
  <tr>
    <th class="tablesorter-header"><div class="tablesorter-header-inner roundedCorners">Column 1</div></th>
    <th class="tablesorter-header"><div class="tablesorter-header-inner roundedCorners">Column 2</div></th>
  </tr>
</thead>

$(function(){
  $("table").tablesorter({
    headerTemplate: '{icon}{content}',
    onRenderTemplate: function (index, template){
      return '<em>' + (index + 1) + ':</em> ' + template;
    }
  });
});

<thead>
  <tr>
    <th class="tablesorter-header"><div class="tablesorter-header-inner"><em>1:</em> <i class="tablesorter-icon"></i>First Name</div></th>
    <th class="tablesorter-header"><div class="tablesorter-header-inner"><em>2:</em> <i class="tablesorter-icon"></i>Last Name</div></th>
  </tr>
</thead>

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

$(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)
  });
});

• jQuery data data-sortInitialOrder="asc".
• metadata class="{ sortInitialOrder: 'asc'}". This requires the metadata plugin.
• headers option headers : { 0 : { sortInitialOrder : 'asc' } }.
• header class name class="sortInitialOrder-asc".
• Overall sortInitialOrder option.

• This option no longer switches the sort to use the String.localeCompare method.
• When this option is true, the text parsed from table cells will convert accented characters to their equivalent to allow the alphanumeric sort to properly sort.
• If false (default), any accented characters are treated as their value in the standard unicode order.
• The following characters are replaced for both upper and lower case (information obtained from sugar.js sorting equivalents table):
  • áàâãä replaced with a
  • ç replaced with c
  • éèêë replaced with e
  • íìİîï replaced with i
  • óòôõö replaced with o
  • úùûü replaced with u
  • ß replaced with S
• Please see the example page for instrcutions on how to modify the above equivalency table.
• If you would like to continue using the String.localeCompare method, then set the sortLocaleCompare option to false and use the new textSorter option as follows:

  $('table').tablesorter({
    textSorter: function(a,b) {
      return a.localeCompare(b);
    }
  });

NOTE! See the Language wiki page for language specific examples and how to extend the character equivalent tables seen in the sortLocaleCompare demo.

• "max" will treat any text in that column as a value greater than the max (more positive) value. Renamed from "max+".
• "min" will treat any text in that column as a value greater than the min (more negative) value. Renamed from "max-".
• "top" will always sort the text to the top of the column.
• "bottom" will always sort the text to the bottom of the column.
• "none" or "zero" will treat the text as if it has a value of zero.

• jQuery data data-string="top".
• metadata class="{ string: 'top'}". This requires the metadata plugin.
• headers option headers : { 0 : { string : 'top' } }.
• header class name class="string-top".
• Overall stringTo option.

This class was required in the default markup in version 2.0.5. But in version 2.0.6, it was added as an option.

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

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.

Added table and cellIndex variables to the textExtraction function in version 2.1.2.

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

$(function(){
  $("table").tablesorter({
    numberSorter : function(a, b, direction, maxColumnValue){
      // direction; true = ascending; false = descending
      // maxColumnValue = the maximum value of that column (ignoring its sign)
      return a - b;
    }
  });
});

$(function(){
  $("table").tablesorter({
    textSorter : naturalSort
  });
});

$(function(){
  $("table").tablesorter({
    // replace the OVERALL text sorter function
    textSorter: function(a, b, direction, columnIndex, table){
      // direction: true = ascending; false = descending
      // columnIndex: zero-based index of the current table column being sorted
      // table: table DOM element (access options by using table.config)
      return a.localeCompare(b);
    }
  });
});

$(function(){
  $("table").tablesorter({
    textSorter : {
      // replace INDIVIDUAL COLUMN text sorter functions
      0 : function(a, b, direction, columnIndex, table){
        // same as $.tablesorter.sortText (basic alphabetical sort)
        // direction: true = ascending; false = descending
        // columnIndex: zero-based index of the current table column being sorted
        // table: table DOM element (access options by using table.config)
        return a > b ? 1 : (a < b ? -1 : 0);
      },
      1 : $.tablesorter.sortText,    // same as the function in column 0 above (modified in v2.12)
      2 : $.tablesorter.sortNatural, // renamed v2.12 from $.tablesorter.sortText - performs natural sort
      3 : Array.AlphanumericSort     // alphanumeric sort from sugar (http://sugarjs.com/arrays#sorting)
    }
  });
});

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

    // initialize a bunch of widgets
    widgets: ["zebra", "uitheme", "columns", "filter", "resizable", "stickyHeaders"],

    widgetOptions: {

      // *** columns widget ***
      // change the default column class names
      columns : [ "primary", "secondary", "tertiary" ],
      // include thead when adding class names
      columns_thead : true,
      // include tfoot when adding class names
      columns_tfoot : true,

      // *** filter widget ***
      // jQuery selector string (or jQuery object) of external anyMatch filter
      // filter_anyMatch   : null, // THIS OPTION WAS REMOVED IN V2.15
      // Include child rows content in the search
      filter_childRows     : false,
      // show column filters
      filter_columnFilters : true,
      // css class applied to the filter row inputs/select
      filter_cssFilter     : '',
      // data attribute in the header cell that contains the default filter value
      filter_defaultAttrib : 'data-value',
      // jQuery selector string (or jQuery object) of external search inputs
      filter_external      : '',
      // class added to filtered rows; needed by pager plugin
      filter_filteredRow   : 'filtered',
      // add custom filter elements to the filter row
      filter_formatter     : null,
      // add custom filter functions using this option.
      filter_functions     : null,
      // hide filter row when table is empty
      filter_hideEmpty     : true,
      // if true, the filter row is hidden initially until hovered/focused.
      filter_hideFilters   : false,
      // if true, make all searches case-insensitive.
      filter_ignoreCase    : true,
      // if true, search column content while the user types (with a delay)
      filter_liveSearch    : true,
      // a selector in a header with this class name will only show selected options in the drop down
      filter_onlyAvail     : 'filter-onlyAvail',
      // jQuery selector string of an element used to reset the filters.
      filter_reset         : null,
      // Use the $.tablesorter.storage utility to save the most recent filters
      filter_saveFilters   : false,  
      // typing delay in milliseconds before starting a search.
      filter_searchDelay   : 300,
      // if true, filter start from the beginning of the cell contents.
      filter_startsWith    : false,
      // filter all data using parsed content.
      filter_useParsedData : false,
      // Set to true for server-side filtering
      filter_serversideFiltering :  false,

      // *** stickyHeaders widget ***
      // extra class name added to the sticky header row
      stickyHeaders : '',
      // jQuery selector or object to attach sticky header to
      stickyHeaders_attachTo : null
      // number or jquery selector targeting the position:fixed element
      stickyHeaders_offset : 0,
      // added to table ID, if it exists
      stickyHeaders_cloneId : '-sticky',
      // trigger "resize" event on headers
      stickyHeaders_addResizeEvent : true,
      // if false and a caption exist, it won't be included in the sticky header
      stickyHeaders_includeCaption : true,
      // The zIndex of the stickyHeaders, allows the user to adjust this to their needs
      stickyHeaders_zIndex : 2

      // *** resizable widget ***
      // if false, resized columns are not saved for next page reload
      resizable : true,
      // if true, the last column will be resizable (use in non-full width tables)
      resizable_addLastColumn: false,

      // *** savesort widget ***
      // if false, the sort will not be saved for next page reload
      saveSort : true,

      // *** uitheme widget ***
      // include the name of the theme to use current options are
      // "jui" (default) and "bootstrap"
      uitheme : "jui",

      // *** zebra widget ***
      // class names to add, default is [ "even", "odd" ]
      zebra : ["ui-widget-content even", "ui-state-default odd"]

    }

  });
});

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

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

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

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

$(function(){
  $("table").tablesorter({
    widgets: ["columns"], // initialize column styling of the table
    widgetOptions : {
      columns_thead: true
    }
  });
});

$(function(){
  $("table").tablesorter({
    widgets: ["columns"], // initialize column styling of the table
    widgetOptions : {
      columns_tfoot: true
    }
  });
});

$(function(){
  $("table").tablesorter({
    widgets: ["filter"],
    widgetOptions : {
      filter_childRows : true
    }
  });
});

$(function(){
  $("table").tablesorter({
    widgets: ["filter"],
    widgetOptions : {
      filter_columnFilters : true
    }
  });
});

Use the "tablesorter-filter" option to add an extra css class name as follows:

$(function(){
  $("table").tablesorter({
    widgets: ["filter"],
    widgetOptions : {
      // css class applied to the table row containing the filters & the inputs within that row
      // or [ "filter1", "filter2", "filter3", etc... ]
      filter_cssFilter : "tablesorter-filter"
    }
  });
});

$(function(){
  $("table").tablesorter({
    widgets: ["filter"],
    widgetOptions : {
      filter_external : '.search'
    }
  });
});

<input class="search" type="search" data-column="0" placeholder="Search first column">

<input class="search" type="search" data-column="any" placeholder="Search entire table">

• To add the jQuery UI slider, follow this example:

  $(function(){
    $("table").tablesorter({
      widgets: ["filter"],
      widgetOptions : {
        filter_formatter : {
          0 : function($cell, indx){
            return $.tablesorter.filterFormatter.uiSpinner( $cell, indx, {
              value : 0,  // starting value
              min   : 0,  // minimum value
              max   : 50, // maximum value
              step  : 1,  // increment value by
              addToggle: true, // Add a toggle to enable/disable the control
              valueToHeader: false // add current slider value to the header cell
            });
          }
        }
      }
    });
  });

  Any of the other jQuery UI spinner widget options can also be included.
  
  
• Filter formatter functions include: "uiSpinner", "uiSlider", "uiRange" (uiSlider ranged), "uiDatepicker" (range only), "html5Number", "html5Range" and "html5Color".
• For other examples, please refer to the example pages. Formatter part 1 (example 1) adds jQuery UI controls to the filter row, while formatter part 2 (example 2) adds HTML5 controls, if supported, to the filter row.

• Make a sorted select dropdown list of all column contents. Repeated content will be combined.

  $(function(){
    $("table").tablesorter({
      widgets: ["filter"],
      widgetOptions: {
        filter_functions: {
          // Add select menu to this column
          // set the column value to true, and/or add "filter-select" class name to header
          0 : true
        }
      }
    });
  });

  Alternately, instead of setting the column filter funtion to true, give the column header a class name of "filter-select". See the demo.
  
  
• Make a select dropdown list with custom option settings. Each option must have a corresponding function which returns a boolean value; return true if there is a match, or false with no match.

  Regex example

  $(function(){
    $("table").tablesorter({
      widgets: ["filter"],
      widgetOptions: {
        // function variables:
        // e = exact text from cell
        // n = normalized value returned by the column parser
        // f = search filter input value
        // i = column index
        filter_functions: {
          // Add these options to the select dropdown (regex example)
          2 : {
            "A - D" : function(e, n, f, i) { return /^[A-D]/.test(e); },
            "E - H" : function(e, n, f, i) { return /^[E-H]/.test(e); },
            "I - L" : function(e, n, f, i) { return /^[I-L]/.test(e); },
            "M - P" : function(e, n, f, i) { return /^[M-P]/.test(e); },
            "Q - T" : function(e, n, f, i) { return /^[Q-T]/.test(e); },
            "U - X" : function(e, n, f, i) { return /^[U-X]/.test(e); },
            "Y - Z" : function(e, n, f, i) { return /^[Y-Z]/.test(e); }
          }
        }
      }
    });
  });

  Comparison example

  $(function(){
    $("table").tablesorter({
      widgets: ["filter"],
      widgetOptions: {
        // function variables:
        // e = exact text from cell
        // n = normalized value returned by the column parser
        // f = search filter input value
        // i = column index
        filter_functions: {
          // Add these options to the select dropdown (numerical comparison example)
          // Note that only the normalized (n) value will contain numerical data
          // If you use the exact text, you'll need to parse it (parseFloat or parseInt)
          4 : {
            "< $10"      : function(e, n, f, i) { return n < 10; },
            "$10 - $100" : function(e, n, f, i) { return n >= 10 && n <=100; },
            "> $100"     : function(e, n, f, i) { return n > 100; }
          }
        }
      }
    });
  });

  Note: if the filter_ignoreCase option is true, it DOES alter the normalized value (n) by making it all lower case.
  
  
• Make a custom filter for the column.

  $(function(){
    $("table").tablesorter({
      widgets: ["filter"],
      widgetOptions: {
        // function variables:
        // e = exact text from cell
        // n = normalized value returned by the column parser
        // f = search filter input value
        // i = column index
        filter_functions: {
          // Exact match only
          1 : function(e, n, f, i) {
            return e === f;
          }
        }
      }
    });
  });

  Note: if the filter_ignoreCase option is true, it DOES alter the normalized value (n) by making it all lower case.
  
  

$(function(){
  $("table").tablesorter({
    widgets: ["filter"],
    widgetOptions : {
      filter_hideEmpty : false
    }
  });
});

$(function(){
  $("table").tablesorter({
    widgets: ["filter"],
    widgetOptions : {
      filter_hideFilters : true
    }
  });
});

$(function(){
  $("table").tablesorter({
    widgets: ["filter"],
    widgetOptions : {
      filter_ignoreCase : false
    }
  });
});

To use this option, point to a reset button or link using a jQuery selector. For example, add this button (<button class="reset">Reset</button>) to the table header, or anywhere else on the page. That element will be used as a reset for all column and quick search filters (clears all fields):

$(function(){
  $("table").tablesorter({
    widgets: ["filter"],
    widgetOptions : {
      filter_reset : '.reset'
    }
  });
});

$.tablesorter.storage( $('table'), 'tablesorter-filters', '' );

$(function(){
  $("table").tablesorter({
    widgets: ["filter"],
    widgetOptions : {
      filter_searchDelay : 500
    }
  });
});

// target the first filter input
// this method will begin the search after the searchDelay time
$('input.tablesorter-filter:eq(0)').trigger('search');

// this method will begin the search immediately
$('input.tablesorter-filter:eq(0)').trigger('search', false);

// refresh the widget filter; no delay
$('table').trigger('search', false);

$(function(){
  $("table").tablesorter({
    widgets: ["filter"],
    widgetOptions : {
      filter_serversideFiltering : true
    }
  });
});

$(function(){
  $("table").tablesorter({
    widgets: ["filter"],
    widgetOptions : {
      filter_startsWith : true
    }
  });
});

$(function(){
  $("table").tablesorter({
    widgets: ["filter"],
    widgetOptions : {
      filter_useParsedData : false
    }
  });
});

• To only use parsed data in specific columns, set this option to false and use any of the following (they all do the same thing), set in order of priority:
  • jQuery data data-filter="parsed".
  • metadata class="{ filter: 'parsed'}". This requires the metadata plugin.
  • headers option headers : { 0 : { filter : 'parsed' } }.
  • header class name class="filter-parsed".
• Remember that parsed data most likely doesn't match the actual table cell text, 20% becomes 20 and Jan 1, 2013 12:01 AM becomes 1357020060000.

$(function(){
  $("table").tablesorter({
    widgets: ["filter"],
    widgetOptions : {
      filter_defaultAttrib : 'data-value'
    }
  });
});

<th data-value="<30">Age</th>

Previously, this option contained the class name to be applied to the sticky header row (tr) (v2.1).

Use the "stickyHeaders" option to add an extra css class name as follows:

$(function(){
  $("table").tablesorter({
    widgets: ["stickyHeaders"],
    widgetOptions : {
      // css class name applied to the sticky header
      stickyHeaders : "tablesorter-stickyHeader"
    }
  });
});

$(function(){
  $("table").tablesorter({
    widgets: ["stickyHeaders"],
    widgetOptions : {
      // cloned table id suffix
      stickyHeaders_cloneId : "-clone"
    }
  });
});

$(function(){
  $("table").tablesorter({
    widgets: ["stickyHeaders"],
    widgetOptions : {
      // cloned table id suffix
      stickyHeaders_includeCaption : false
    }
  });
});

$(function(){
  $("table").tablesorter({
    widgets: ["stickyHeaders"],
    widgetOptions : {
      // Where to attach the stickyHeaders
      stickyHeaders_attachTo : '.wrapper' // $('.wrapper') jQuery object can also be used
    }
  });
});

$(function(){
  $("table").tablesorter({
    widgets: ["stickyHeaders"],
    widgetOptions : {
      // apply sticky header top 30px below the top of the browser window
      stickyHeaders_offset : 30
    }
  });
});

stickyHeaders_offset : '.navbar-fixed-top' // jQuery selector string

stickyHeaders_offset : $('.navbar-fixed-top') // jQuery object

$(function(){
  $("table").tablesorter({
    widgets: ["resizable"],
    widgetOptions : {
      // add header resize detection
      stickyHeaders_addResizeEvent : true
    }
  });
});

$(function(){
  $("table").tablesorter({
    widgets: ["stickyHeaders"],
    widgetOptions : {
      // The zIndex of the stickyHeaders, allows the user to adjust this to their needs
      stickyHeaders_zIndex : 100
    }
  });
});

$(function(){
  $("table").tablesorter({
    widgets: ["resizable"],
    widgetOptions : {
      // css class name applied to the sticky header
      resizable : false
    }
  });
});

$(function(){
  $("table").tablesorter({
    widgets: ["resizable"],
    widgetOptions : {
      // css class name applied to the sticky header
      resizable_addlastcolumn : true
    }
  });
});

$(function(){
  $("table").tablesorter({
    widgets: ["saveSort"],
    widgetOptions : {
      // if false, the sort will not be saved for next page reload
      saveSort : false
    }
  });
});

To modify the class names used, extend from the $.tablesorter.themes variable as follows:

// Extend the themes to change any of the default class names ** NEW **
$.extend($.tablesorter.themes.jui, {
  // change default jQuery uitheme icons - find the full list of icons
  // here: http://jqueryui.com/themeroller/ (hover over them for their name)
  table      : 'ui-widget ui-widget-content ui-corner-all', // table classes
  header     : 'ui-widget-header ui-corner-all ui-state-default', // header classes
  footerRow  : '',
  footerCells: '',
  icons      : 'ui-icon', // icon class added to the <i> in the header
  sortNone   : 'ui-icon-carat-2-n-s',
  sortAsc    : 'ui-icon-carat-1-n',
  sortDesc   : 'ui-icon-carat-1-s',
  active     : 'ui-state-active', // applied when column is sorted
  hover      : 'ui-state-hover',  // hover class
  filterRow  : '',
  even       : 'ui-widget-content', // even row zebra striping
  odd        : 'ui-state-default'   // odd row zebra striping
});

$(function(){
  $("table").tablesorter({
    theme     : 'jui',       // set theme name from $.tablesorter.themes here
    widgets   : ["uitheme"], // initialize ui theme styling widget of the table
    widgetOptions: {
      uitheme : "jui"        // this is now optional in v2.7, it is overridden by the theme option
    }
  });
});

$.tablesorter.themes.custom = {
  table      : 'table',       // table classes
  header     : 'header',      // header classes
  footerRow  : '',
  footerCells: '',
  icons      : 'icon',        // icon class added to the <i> in the header
  sortNone   : 'sort-none',   // unsorted header
  sortAsc    : 'sort-asc',    // ascending sorted header
  sortDesc   : 'sort-desc',   // descending sorted header
  active     : 'sort-active', // applied when column is sorted
  hover      : 'hover',       // hover class
  filterRow  : 'filters',     // class added to the filter row
  even       : 'even',        // even row zebra striping
  odd        : 'odd'          // odd row zebra striping
}

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

<div class="pager">
  <form>
    <img src="first.png" class="first"/>
    <img src="prev.png" class="prev"/>
    <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
    <img src="next.png" class="next"/>
    <img src="last.png" class="last"/>
    <select class="pagesize">
      <option selected="selected" value="10">10</option>
      <option value="20">20</option>
      <option value="30">30</option>
      <option value="40">40</option>
    </select>
    <select class="gotoPage" title="Select page number"></select>
  </form>
</div>

$(function(){
  $("table")
    .tablesorter()
    .tablesorterPager({
      container: $(".pager")
    });
  });
});

$(function(){
  $("table")
    .tablesorter()
    .tablesorterPager({
      ajaxUrl: "http://mydatabase.com?page={page}&size={size}&{sortList:col}&{filterList:fcol}",
      ajaxProcessing: function(ajax){
        // do something with the ajax
        return [ formatted_data, total_rows ];
      }
    });
});

$(function(){
  $("table")
    .tablesorter()
    .tablesorterPager({
      ajaxUrl: "http://mydatabase.com?page={page}&size={size}&{sortList:col}&{filterList:fcol}",
      ajaxProcessing: function(ajax){
        // do something with the ajax
        return [ formatted_data, total_rows ];
      },
      // modify the url after all processing has been applied
      customAjaxUrl: function(table, url) {
        // trigger my custom event
        $(table).trigger('changingUrl');
        // send the server the current page
        return url += '&currntUrl=' + window.location.href;
      }
    });
});

$(function(){
  $("table")
    .tablesorter()
    .tablesorterPager({
      ajaxUrl: "http://mydatabase.com?page={page}&size={size}&{sortList:col}&{filterList:fcol}",
      ajaxObject: {
        // add more ajax settings here
        // see http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings
        dataType: 'json'
      },
      ajaxProcessing: function(ajax){
        // do something with the ajax;
        return [ total_rows ];
      }
    });
});

// [ total_rows (number), rows (array of arrays), headers (array; optional) ]
// or [ rows, total_rows, headers ]
// or [ total_rows, $(rows) ]
// or [ total_rows ]
[
  100, // total rows
  [
    [ "row1cell1", "row1cell2", ... "row1cellN" ],
    [ "row2cell1", "row2cell2", ... "row2cellN" ],
    ...
    [ "rowNcell1", "rowNcell2", ... "rowNcellN" ]
  ],
  [ "header1", "header2", ... "headerN" ] // optional
]

{
  // total rows
  "total_rows": 80,
  // headers
  "cols" : [
    "ID", "Name", "Country Code", "District", "Population"
  ],
  // row data...
  "rows" : [{
    "ID": 1,
    "Name": "Kabul",
    "CountryCode": "AFG",
    "District": "Kabol",
    "Population": 1780000
  }, {
    // row 2, etc...
  }]
}

$(function(){
  $("table")
    .tablesorter()
    .tablesorterPager({
      ajaxUrl: "http://mydatabase.com?page={page}&size={size}",
      ajaxProcessing: function(data){
        if (data && data.hasOwnProperty('rows')) {
          var r, row, c, d = data.rows,
          // total number of rows (required)
          total = data.total_rows,
          // array of header names (optional)
          headers = data.cols,
          // all rows: array of arrays; each internal array has the table cell data for that row
          rows = [],
          // len should match pager set size (c.size)
          len = d.length;
          // this will depend on how the json is set up - see City0.json
          // rows
          for ( r = 0; r < len; r++ ) {
            row = []; // new row array
            // cells
            for ( c in d[r] ) {
              if (typeof(c) === "string") {
                row.push(d[r][c]); // add each table cell data to row array
              }
            }
            rows.push(row); // add new row array to rows array
          }
          return [ total, rows, headers ]; // or return [ rows, total, headers ] in v2.9+
        }
      }
    });
});

ajaxProcessing: function(data, table){
  if (data && data.hasOwnProperty('rows')) {
    var r, row, c, d = data.rows,
    // total number of rows (required)
    total = data.total_rows,
    // array of header names (optional)
    headers = data.headers,
    // all rows: array of arrays; each internal array has the table cell data for that row
    rows = '',
    // len should match pager set size (c.size)
    len = d.length;
    // this will depend on how the json is set up - see City0.json
    // rows
    for ( r=0; r < len; r++ ) {
      rows += '<tr class="ajax-row">'; // new row
      // cells
      for ( c in d[r] ) {
        if (typeof(c) === "string") {
          rows += '<td>' + d[r][c] + '</td>'; // add each table cell data to row
        }
      }
      rows += '</tr>'; // end new row
    }
    // don't attach the $(rows) because it's difficult to tell old from new data
    // and no need to trigger an update method, it's done internally
    return [ total, $(rows), headers ];
  }
}

ajaxProcessing: function(data, table){
  if (data && data.hasOwnProperty('rows')) {
    var r, row, c, d = data.rows,
    // total number of rows (required)
    total = data.total_rows,
    // all rows: array of arrays; each internal array has the table cell data for that row
    rows = '',
    // len should match pager set size (c.size)
    len = d.length;
    // this will depend on how the json is set up - see City0.json
    // rows
    for ( r=0; r < len; r++ ) {
      rows += '<tr class="ajax-row">'; // new row
      // cells
      for ( c in d[r] ) {
        if (typeof(c) === "string") {
          rows += '<td>' + d[r][c] + '</td>'; // add each table cell data to row
        }
      }
      rows += '</tr>'; // end new row
    }
    // find first sortable tbody, then add new rows
    table.config.$tbodies.eq(0).html(rows);
    // no need to trigger an update method, it's done internally
    return [ total ];
  }
}

$(function(){
  $("table")
    .tablesorter()
    .tablesorterPager({
      output: '{startRow} to {endRow} of {totalRows} rows'
    });
  });
});

<input class="search" type="search">
<button type="button" class="reset">Reset Search</button>

$(function(){
  $("table").tablesorter({
    widgets: ["filter"],
    widgetOptions : {
      filter_anyMatch : true,
      filter_columnFilters: false,
      filter_reset: '.reset'
    }
  });

  // Target the $('.search') input using built in functioning
  // this binds to the search using "search" and "keyup"
  // Allows using filter_liveSearch or delayed search &
  // pressing escape to cancel the search
  $.tablesorter.filter.bindSearch( $table, $('.search') );

});

// 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),
    // resort table using the current sort; set to false to prevent resort, otherwise
    // any other value in resort will automatically trigger the table resort.
    // A callback method was added in 2.3.9.
    resort = true,
    callback = function(table){
      alert('rows have been added!');
    };
  $('table')
    .find('tbody').append($row)
    .trigger('addRows', [$row, resort, callback]);

// Target a specific header
$('table').find('th:eq(2)').trigger('sort');

// Choose a new sort order
var sort = [[0,0],[2,0]],
    callback = function(table){
        alert('new sort applied to ' + table.id);
    };
// Note that the sort value below is inside of another array (inside another set of square brackets)
// A callback method was added in 2.3.9.
$("table").trigger("sorton", [sort, callback]);

// Reset the table (make it unsorted)
$("table").trigger("sortReset");

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

// let the plugin know that we made a update
// the resort flag set to anything BUT false (no quotes) will trigger an automatic
// table resort using the current sort
// A callback method was added in 2.3.9.
var resort = true,
    callback = function(table){
        alert('new sort applied');
    };
$("table").trigger("update", [resort, callback]);

// As of version 2.0.14, the table will automatically resort after the update (if the "resort" flag is true
// & will use the current sort selection), 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("update", [ false ])
	.trigger("sorton", [sorting]);

// Change thead & tbody column of cells
// remember, "eq()" is zero based & "nth-child()" is 1 based
$("table thead th:eq(2)").html("Number");
// add some random numbers to the table cell
$("table tbody").find('td:nth-child(3)').html(function(i,h){
  return Math.floor(Math.random()*10) + 1; // random number from 0 to 10
});

var resort = true, // re-apply the current sort
  callback = function(table){
    alert('table updated!');
  };

// let the plugin know that we made a update, then the plugin will
// automatically sort the table based on the header settings
$("table").trigger("updateAll", [ resort, callback ]);

$("table").trigger("updateCache");

• When the pager removeRows option is true.
• When not using the "updateCell" or "addRows" methods.
• Before manually adding or removing table rows.
• And, before triggering an "update".

// how to update the table contents
$("table")
  .trigger("appendCache")
  .append('<tr>...</tr>') // add new row(s), or delete rows
  .trigger("update"); // update the cache

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

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

        // Do we want to reapply the current sort on the column?
    var resort = false,
        // Do something after the cell update in this callback function
        callback = function(table){
          /* do something */
        },
        // randomize a number & add it to the cell
        discount = '$' + Math.round(Math.random() * Math.random() * 100) + '.' +
          ('0' + Math.round(Math.random() * Math.random() * 100)).slice(-2);

    // add new table cell text
    $(this).text(discount);

    // update the table, so the tablesorter plugin can update its value
    // set resort flag to false to prevent automatic resort (since we're using a different sort below)
    // leave the resort flag as undefined, or with any other value, to automatically resort the table
    // $("table").trigger("updateCell", [this]); < - resort is undefined so the table WILL resort
    $("table").trigger("updateCell", [this, resort, callback]);

    // 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']);
    return false;
  });

});

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

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

// Remove tablesorter and all classes
$("table").trigger("destroy");

// Remove tablesorter and all classes but the "tablesorter" class on the table
// callback is a function
$("table").trigger("destroy", [false, callback]);

// trigger a refresh widget event
$('table').trigger('refreshWidgets', [doAll, dontapply]);

// Use the API directly
$.tablesorter.refreshWidgets(table, doAll, dontapply)

• If doAll is true it removes all widgets from the table. If false only non-current widgets (from the widgets option) are removed.
• When done removing widgets, the widget re-initializes the currently selected widgets, unless the dontapply parameter is true leaving the table widget-less.
• Note that if the widgets option has any named widgets, they will be re-applied to the table when it gets resorted. So if you want to completely remove all widgets from the table, also clear out the widgets option $('table')[0].config.widgets = [];

$(function(){
  // apply "2?%" filter to the fifth column (zero-based index)
  var columns = [];
  columns[4] = '2?%'; // or define the array this way [ '', '', '', '', '2?%' ]
  $('table').trigger('search', [columns]);
});

$(function(){
  // apply "2?%" filter to the fifth column (zero-based index)
  $('table').find('input.tablesorter-filter').eq(4).val('2?%');
  $('table').trigger('search', false); // add a false flag to skip the search delay
});

// in a table with 4 columns; set the 5th parameter to any-match
$('table').trigger( 'search', [['', '', '', '', 'orange']] ); // find orange in any column

$(function(){
  // this is the same code that the filter_reset element runs to clear out the filters.
  $('button').click(function(){
    $('table').trigger('filterReset');
    return false;
});

$(function(){
  $('button').click(function(){
    $('table').trigger('saveSortReset');
    return false;
  });
});

$(function(){
  $('table').trigger('pageSize', 15);
});

$(function(){
  $('table').trigger('pageSet', 3);
});

$(function(){
  $('table').trigger('destroy.pager');
});

$(function(){
  $('table').tablesorterPager(pagerOptions);
});

$(function(){
  $('table').trigger('disable.pager');
});

$(function(){
  $('table').trigger('enable.pager');
});

$(function(){

  // bind to initialized event BEFORE initializing tablesorter
  $("table")
    .bind("tablesorter-initialized",function(e, table) {
      // do something after tablesorter has initialized
    });

  // initialize the tablesorter plugin
  $("table").tablesorter({
    // this is equivalent to the above bind method
    initialized : function(table){
      // do something after tablesorter has initialized
    }
  });

});

$(function(){

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

  // bind to sort events
  $("table").bind("sortBegin",function(e, table) {
    // do something crazy!
  });
});

$(function(){

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

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

$(function(){

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

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

$(function(){

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

  // bind to sort events
  $("table")
    .bind("updateComplete",function(e, table) {
      // do something after the table has been altered;
    });
});

$(function(){
  $('table').bind('filterInit', function(){
    $(this).find('tr.tablesorter-filter-row').addClass('fred');
  });
});

$(function(){
  $('table').bind('filterStart', function(){
    $(this).find('tr.tablesorter-filter-row').addClass('filtering');
  });
});

$(function(){
  $('table').bind('filterEnd', function(){
    $(this).find('tr.tablesorter-filter-row').removeClass('filtering');
  });
});

$(function(){
  $('table').bind('stickyHeadersInit', function(){
    // this.config.widgetOptions.$sticky contains the entire sticky header table
    this.config.widgetOptions.$sticky.find('tr.tablesorter-headerRow').addClass('sticky-styling');
  });
});

$(function(){

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

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

    // bind to pager events
    .bind('pagerChange pagerComplete', function(event, options){
      // options = table.config.pager (pager addon)
      // options = table.config (pager widget) - so use options.pager.page below
      // c.totalPages contains the total number of pages
      $('#display').html( event.type + " event triggered, now on page " + (options.page + 1) );
    });

});

$(function(){

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

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

    // bind to pager events
    .bind('pagerChange pagerComplete', function(event, options){
      // options = table.config.pager (pager addon)
      // options = table.config (pager widget) - so use options.pager.page below
      // c.totalPages contains the total number of pages
      $('#display').html( event.type + " event triggered, now on page " + (options.page + 1) );
    });

});

$(function(){

  $("table")

    // initialize the sorter
    .tablesorter()

    // bind to pager initialized event BEFORE calling the addon
    .bind('pagerBeforeInitialized', function(event, options){
      // options = table.config.pager (pager addon)
      // options = table.config (pager widget)

      // event = event object; options = pager options
    })

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

});

$(function(){

  $("table")

    // initialize the sorter
    .tablesorter()

    // bind to pager initialized event BEFORE calling the addon
    .bind('pagerInitialized', function(event, options){
      // options = table.config.pager (pager addon)
      // options = table.config (pager widget) - so use options.pager.page below
      // c.totalPages contains the total number of pages
      $('#display').html( e.type + " event triggered, now on page " + (options.page + 1) );
    })

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

});

$(function(){

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

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

    // bind to pager events
    .bind('pageMoved', function(event, options){
      // options = table.config.pager (pager addon)
      // options = table.config (pager widget) - so use options.pager.page below
      // c.totalPages contains the total number of pages
      $('#display').html( event.type + " event triggered, now on page " + (options.page + 1) );
    });

});