Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Github fork of Christian Bach's tablesorter plugin:

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.


tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell.

See the full documentation



  • Multi-column sorting.
  • Parsers for sorting text, alphanumeric text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats) & time. Add your own easily
  • Support for ROWSPAN and COLSPAN on TH elements.
  • Support secondary "hidden" sorting (e.g., maintain alphabetical sort when sorting on other criteria).
  • Extensibility via widget system.
  • Cross-browser: IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+.
  • Small code size.
  • Works with jQuery 1.2.3+


Included all original document pages with updates from my blog post on undocumented options.


Change Log

View the complete listing here.

Version 2.1 (3/3/2012)

  • Added selectorRemove option

    • Any table row with this css class will be removed from the table prior to updating the table contents.
    • The reason this was added was in case a widget or some other script adds rows to the table for styling, or something else. If a table update is triggered ($(table).trigger('update');), all rows in the table will be included in the update.
    • The writing custom widgets demo has been updated to include this class name.
    • The pager plugin update also uses this to remove the row added by the new fixedHeight option.
    • It's default value is tr.remove-me, so it can be modified to remove more than just rows.
  • Fixed a bug that broke the plugin if you set sorter: true in the header options.

  • Pager plugin update

    • Ajax

      • The pager plugin will now interact with a database via JSON. See demo here.
      • Added ajaxUrl option which contains the variables {page} and {size} which will be replaced by the plugin to obtain that data.

        ajaxUrl : "http:/{page}&size={size}"
      • Another option named ajaxProcessing was included to process the data before returning it to the pager plugin. Basically the JSON needs to contain the data to match the example below. An additional required variable is the total number of records or rows needs to be returned.

        // process ajax so that the data object is returned along with the total number of rows
        // example: { "data" : [{ "ID": 1, "Name": "Foo", "Last": "Bar" }], "total_rows" : 100 }
        ajaxProcessing: function(ajax){
          if (ajax && ajax.hasOwnProperty('data')) {
            // return [ "data", "total_rows" ];
            return [, ajax.total_rows ];
      • I tried to make the plugin interact with a database as flexible as possible, but I'm sure I haven't covered every situation. So any and all feedback is welcome!

      • Also, much thanks to kachar for the enhancement request and willingness to help test it!
    • Removed positionFixed and offset options.

    • Added fixedHeight option which replaces the positionFixed and offset options by maintaining the height of the table no matter how few rows are showing. During testing, it displayed some odd behaviour after adding or deleting rows, but it should have been fixed... just please keep an eye out ;).
    • The pager now adds all of its options to the table configuration options within an object named "pager". Basically what this means is that instead of add all of the pager options to be mixed in with the tablesorter options, the pager options have been isolated and can be found by typing this into the browser console: $('table')[0].config.pager.
  • Storage function added named $ for use in widgets

    • It is used by various widgets to save data to either local storage (if available) or cookies.
    • This function needs to use JSON.stringify() which is not supported by IE7. If you need to support IE7, then include this library: JSON-js.
    • Use the function with your own custom widgets as follows:

        // *** Save data (JSON format only) ***
        // val must be valid JSON... use to ensure it is valid
        var val = { "mywidget" : "data1" }; // valid JSON uses double quotes
        // $, key, val);
        $, 'tablesorter-mywidget', val);
        // *** Get data: $, key); ***
        v = $, 'tablesorter-mywidget');
        // val may be empty, so also check for your data
        val = (v && v.hasOwnProperty('mywidget')) ? v.mywidget : '';
        alert(val); // "data1" if saved, or "" if not
  • Added an option named widgetOptions:

    • This is a move to store all widget specific options in one place so as not to polute the main table options.
    • All current widgets have been modified to use this new option.
    • Only one widget option, widgetZebra will be retained for backwards compatibility with the original plugin.
    • More details for each widget are explained below.
  • Zebra widget:

    • Added zebra options to the new widgetOptions.

      widgetOptions : {
        zebra : [ "even", "odd" ]
    • This replaces widgetZebra: { css: [ "even", "odd" ] }, but if the widgetZebra option exists, it will over-ride this newer widgetOptions.zebra option in order to maintain backwards compatibility.

  • UI Theme widget:

    • Changed css class of div wrapping the contents of each header cell from "inner" to "tablesorter-inner".
    • Added "ui-state-default" to the table head columns. Thanks to Raigen for sharing the code!
    • Moved widgetUitheme option into the new widgetOptions.

      widgetOptions : {
        // adding zebra striping, using content and default styles - the ui css removes the background from default
        // even and odd class names included for this demo to allow switching themes
        zebra   : ["ui-widget-content even", "ui-state-default odd"],
        // change default uitheme icons - find the full list of icons here: (hover over them for their name)
        // default icons: ["ui-icon-arrowthick-2-n-s", "ui-icon-arrowthick-1-s", "ui-icon-arrowthick-1-n"]
        // ["up/down arrow (cssHeaders/unsorted)", "down arrow (cssDesc/descending)", "up arrow (cssAsc/ascending)" ]
        uitheme : ["ui-icon-carat-2-n-s", "ui-icon-carat-1-s", "ui-icon-carat-1-n"]
  • Filter widget changes:

    • Added a new filter widget specific option widgetOptions.filterStart which makes the filter only work from the first letter.
    • Added a widgetOptions.cssFilter option which now contains the class name added to the filter row and each input within it. Previously the class name used was "filters" for the row and "filter" for the input, now both are "tablesorter-filter". Thanks to cr125rider for sharing a code fix!
    • Added css3 box sizing to allow a better fitting filter box. Thanks to thezoggy for sharing the code!
    • The css changes were also added to the blue, green and UI style sheets.
    • Updated the filter widget demo with the available options described above; this includes the widgetOptions.filter_childRows option which was previously undocumented, recently renamed.
  • Resizable Columns Widget changes:

    • The resized column width is now saved using the $ function (optional)
    • If the storage function doesn't exist, the widget will still function, but just not save the column width.
  • Save Sort Widget changes:

    • Modified to now use the $ function (required)
    • The storage function is required for this widget to work properly.
    • Previous saved data is not compatible with the changes made and will be ignored.
  • Updated all docs demos to use jQuery 1.7+.

Version 2.0.31 (2012-2-27)

  • Added sortRestart option:
    • When true, this option resets the sort direction so that clicking on an unsorted column will now sort in the sortInitialOrder direction.
    • Clicking on a single column to cancel a multi-sorted table may not initially sort as expected.
    • Requested by severa in issue #30. Thanks!
  • Made some sortReset fixes:
    • Columns widget will now clear it's styling when the sort has reset.
    • Added a demo.
  • Changed the filter widget inputs to be of a search type:
    • Currently only supported by webkit.
    • Requested by cr125rider in issue #29. Thanks!
  • Updated sortLocaleCompare documentation since it was explained incorrectly.
  • Did some general code cleanup and some optimization.

Version (2012-2-20)

  • Modified the "filter" widget to disable the input window instead of setting it with display none. Now the input is disabled and a "disabled" class is applied to allow for further styling.

Version 2.0.30 (2012-2-20)

  • Fixed the total mess I just made with the addWidget init functionality... I need a vacation :P

Version 2.0.29 (2012-2-20)

  • Fixed a problem with the addWidget init function which apparently was always being called, even if you didn't want it! Fix for issue #28. Thanks to thezoggy for helping with troubleshooting!
  • Minor cleanup of sorting class names code.
Something went wrong with that request. Please try again.