Tablesorter Asc Descriptive Essay

If you need support for my fork of tablesorter, please contact me here:

The Missing Docs for jQuery Tablesorter 2.0


All Defaults


Appearance
cssHeader: "header"The CSS style used to style the header in its unsorted state.
cssAsc: "headerSortUp"The CSS style used to style the header when sorting ascending.
cssDesc: "headerSortDown"The CSS style used to style the header when sorting descending.
cssChildRow: "expand-child"This allows you to add a child row that is always attached to the parent. See the children rows section below.
widgetZebra: { css: ["even", "odd"] }Set the CSS classes used for zebra striping the table. See the updating zebra striping section below.
widthFixed: falseIndicates if tablesorter should apply fixed widths to the table columns. This is useful for the Pager companion. Requires the jQuery dimension plugin to work. See the main demo page
onRenderHeader: nullThis function is called when classes are added to the th tags. You can use this to append HTML to each header tag. See the Render Header section below.
Sort Options
sortInitialOrder: "asc"A string of the inital sorting order can be "asc" or "desc". This is overridden bt the settings.
sortForce: nullUse to add an additional forced sort that is prepended to . For example, will sort the first column in ascending order. See the main demo page
sortList: []Add an array of the order the table should be initially sorted; e.g. . The first part "[0,1]" will sort the first column (zero based index) in decending order and the second part "[1,0]" is to sort the second column in ascending order. See the main demo page.
sortAppend: nullUse to add an additional default sorting rule, that is appended to the .
Parsers & Widgets
headers: {}See the Change how you sort a column section below or see the main demo page
textExtraction: "simple"See the Text Extraction section below or see the main demo page
sortLocaleCompare: trueBoolean flag indicating whenever to use String.localeCampare method or not. This is only used when comparing text strings.
parsers: {}Internal list of all of the parsers. See a complete list of parsers below.
widgets: []Initialize widgets using this option (e.g. , or custom widgets ; see this demo on how to add a custom widget.)
selectorHeaders: 'thead th'jQuery selectors used to find the header cells. You can change this, but the table will still need the required thead and tbody before this plugin will work properly.
headerList: []Internal list of each header element as selected using jQuery selectors in the option.
dateFormat: "us"Set the date format. See the dataFormat section below.
Interaction
sortMultiSortKey: "shiftKey"The key used to select more than one column for multi-column sorting. Defaults to the shift key. Other options might be ctrlKey, altKey. See the main demo page
cancelSelection: trueIndicates if tablesorter should disable selection of text in the table header (TH). Makes header behave more like a button.
Unknown
decimal: '/\.|\,/g'Regex to find the decimal "." for U.S. format and "," for European format... but I can't find it being used anywhere in the plugin.
Debugging
debug: falseBoolean flag indicating if tablesorter should display debuging information usefull for development. This displays information in the console, if available, or in alerts. See the main demo page

Update Default Settings

Update any of the default settings above using this format:
$(selector).data("tablesorter").{default name} = newValue;
Here are a few examples:
// Change sortForce $("table").data("tablesorter").sortForce = [[1,0]]; // it appears that the only way to update the table is to resort it $("table").trigger("sorton", [[0,1]]); // Add zebra sorting after the table has initialized $("table").data("tablesorter").widgets = ["zebra"]; // there is a method to apply widgets! $("table").trigger("applyWidgets");

Child Rows

To add a row that remains attached to a parent row, add the "expand-child" class to the row.

You can add some scripting to hide these child rows and have them expand when you click on a link; this is the original reason for the css name.

Here is the original mod page, the code was added into the TableSorter core but remains undocumented.

This makes the tablesorter plugin keep these rows together. This css class can be changed using the "cssChildRow" option.

Here is some example markup:
<table width="100%" border="1"> <thead> <tr> <th>Item #</th> <th>Name</th> <th>Available</th> </tr> </thead> <tbody> <tr> <td>12345</td> <td>Toy Car</td> <td>5</td> </tr> <tr class="expand-child"> <!-- this row will remain attached to the above row, and not sort separately --> <td colspan="3"> It's a toy car! </td> </tr> <tr> <td>23456</td> <td>Toy Plane</td> <td>2</td> </tr> <tr class="expand-child"> <!-- this row will remain attached to the above row, and not sort separately --> <td colspan="3"> It's a toy plane! </td> </tr> <tr class="expand-child"> <!-- this row will remain attached to the above two rows, and not sort separately --> <td colspan="3"> and it flies! </td> </tr> </tbody> </table>


Update Zebra Striping After Sorting

Actually the zebra striping widget does this for you automatically.

By default the odd and even rows are styled using "odd" and "even" class names ().

Change these css class names using the option as follows:

Modify the Header Markup

The option allows you to add a function that which can modify the HTML of each header tag. In the example below, the header cell () content is wrapped with a span tag to allow for better styling (source).
and you'll end up with this (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>


Change how you sort a column

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

You can easily override this by setting the header argument (or column parser).
*Note* the header number starts with zero (zero based index).

Here is a list of available sorter values/parsers:

sorter: falsedisable sort for this column.
sorter: "text"Sort alphabetically.
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.

Change the Date Format (dateFormat)

"us""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)




Change the Sorted Columns

There are three options to determine the sort order and this is the order of priority:
  1. forces the user to have this/these column(s) sorted first (null by default).
  2. is the initial sort order of the columns.
  3. 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: where is a zero-based index for your columns left-to-right and 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]]
*NOTE* When writing this post, I didn't realize that the sortAppend option was listed as an option, but the code for it did not exist. This problem is fixed in my fork of tablesorter (example).

Text Extraction

This is demonstrated in the Dealing with markup inside cells demo page, but the example uses vanilla javascript to find the desired text, like this:
But you could make your life easier and just make the node into a jQuery object and then "find" what you need:
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.


*NOTE* When writing this post, I didn't realize that the textExtraction option did not allow defining it per column, as shown below, but this has been fixed in the forked github version - example.


Methods

See examples of each further down
sortonResort the table using new sort parameters.
updateUpdate the stored tablesorter data and the table.
appendCacheUpdate a table that has had its data dynamically updated; used in conjunction with "update"
updateCellUpdate a table cell in the tablesorter data.
applyWidgetIdApply a widget (wrapped in square brackets) to the table one time only.
applyWidgetsApply previously selected widgets to the table - will update the widget with new sort.

Resort the table - "sorton" method

See the full example in the tablesorter docs: Sort table using a link outside the table
// 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]);

Update the Table

See the full example in the tablesorter docs: Appending table data with ajax
// 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]]; // sort on the first column $("table").trigger("sorton", [sorting]);

Append Cache

If you dynamically change the table content, more than just one cell like in the "updateCell" example above, you may possibly have to trigger two events: "update" and "appendCache".

This answer is from a StackOverflow answer
// Table data was just dynamically updated $(table) .trigger("update") .trigger("appendCache");

Update a Table Cell

Example from these alternate tablesorter docs: Updating the table cache - the demo doesn't work, but I've tested the example code below and it works properly.
<table class="tablesorter" cellspacing="1"> <thead>> <tr> <th>first name</th> <th>last name</th> <th>age</th> <th>total</th> <th>discount</th> <th>date</th> </tr> </thead> <tbody> <tr> <td>peter</td> <td>parker</td> <td>28</td> <td class="discount">$9.99</td> <td>20%</td> <td>jul 6, 2006 8:14 am</td> </tr> <tr> <td>john</td> <td>hood</td> <td>33</td> <td class="discount">$19.99</td> <td>25%</td> <td>dec 10, 2002 5:14 am</td> </tr> <tr> <td>clark</td> <td>kent</td> <td>18</td> <td class="discount">$15.89</td> <td>44%</td> <td>jan 12, 2003 11:14 am</td> </tr> <tr> <td>bruce</td> <td>almighty</td> <td>45</td> <td class="discount">$153.19</td> <td>44%</td> <td>jan 18, 2001 9:12 am</td> </tr> <tr> <td>bruce</td> <td>evans</td> <td>22</td> <td class="discount">$13.19</td> <td>11%</td> <td>jan 18, 2007 9:12 am</td> </tr> </tbody> </table>

Apply a New Widget "applyWidgetId"

Apply a widget to the table. In this example, we apply the zebra striping to the table after it has been initialized.

Apply Chosen Widgets "applyWidgets"

Reapply a widget to the table. In this example, we apply the zebra striping to the table after it has been initialized.

This is basically an alternate method to the "applyWidgetId", but in the example below you can add or remove widgets from the chosen list.
// Update the list of widgets to apply to the table (add or remove) $("table").data("tablesorter").widgets = ["zebra"]; $("table").trigger('applyWidgets');




Triggered Events

sortStartThis event fires when the tablesorter plugin is about to start resorting the table.
sortEndThis event fires when the tablesorter plugin has completed resorting the table.


Bind to the "sortStart" and/or the "sortEnd" events as shown on the example page
Or here is another example from StackOverflow

tablesorter(unofficial fork)

Documentation

Flexible client-side table sorting

Original Author: Christian Bach
Maintainer of this fork: Rob Garrison (Mottie)
Version:2.1+ (changelog) 
Licence: Dual licensed under MIT or GPL licenses.

Contents

  1. Introduction
  2. Demo
  3. Getting started
  4. Examples
  5. Configuration
  6. Widget & Pager Options (v2.1)
  7. Methods
  8. Events
  9. API
  10. Download
  11. Compatibility
  12. Support
  13. Credits

Introduction

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. It has many useful features including:

  • Multi-column sorting
  • Multi-tbody sorting - see the options table below
  • Parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time. Add your own easily
  • 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+
  • Works with jQuery 1.2.6+ (jQuery 1.4.1+ needed with some widgets).
  • Works with jQuery 1.9+ ($.browser.msie was removed; needed in the original version).
  • Small code size

Demo

Account #First NameLast NameAgeTotalDiscountDifferenceDate
A42bPeterParker28$9.9920.9%+12.1Jul 6, 2006 8:14 AM
A255JohnHood33$19.9925%+12Dec 10, 2002 5:14 AM
A33ClarkKent18$15.8944%-26Jan 12, 2003 11:14 AM
A1BruceAlmighty45$153.1944.7%+77Jan 18, 2001 9:12 AM
A102BruceEvans22$13.1911%-100.9Jan 18, 2007 9:12 AM
A42aBruceEvans22$13.1911%0Jan 18, 2007 9:12 AM

TIP! Sort multiple columns simultaneously by holding down the key and clicking a second, third or even fourth column header!

Getting started

To use the tablesorter plugin, include the jQuery library and the tablesorter plugin inside the tag of your HTML document:

<!-- choose a theme file --> <link rel="stylesheet" href="/path/to/theme.default.css"> <!-- load jQuery and tablesorter scripts --> <script type="text/javascript" src="/path/to/jquery-latest.js"></script> <script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script> <!-- tablesorter widgets (optional) --> <script type="text/javascript" src="/path/to/jquery.tablesorter.widgets.js"></script>

tablesorter works on standard HTML tables. You must include THEAD and TBODY tags:

<table id="myTable" class="tablesorter"> <thead> <tr> <th>Last Name</th> <th>First Name</th> <th>Email</th> <th>Due</th> <th>Web Site</th> </tr> </thead> <tbody> <tr> <td>Smith</td> <td>John</td> <td>[email protected]</td> <td>$50.00</td> <td>http://www.jsmith.com</td> </tr> <tr> <td>Bach</td> <td>Frank</td> <td>[email protected]</td> <td>$50.00</td> <td>http://www.frank.com</td> </tr> <tr> <td>Doe</td> <td>Jason</td> <td>[email protected]</td> <td>$100.00</td> <td>http://www.jdoe.com</td> </tr> <tr> <td>Conway</td> <td>Tim</td> <td>[email protected]</td> <td>$50.00</td> <td>http://www.timconway.com</td> </tr> </tbody> </table>

Start by telling tablesorter to sort your table when the document is loaded:

Click on the headers and you'll see that your table is now sortable! You can also pass in configuration options when you initialize the table. This tells tablesorter to sort on the first and second column in ascending order.

NOTE! tablesorter will auto-detect most data types including numbers, dates, ip-adresses for more information see Examples

Examples

These examples will show what's possible with tablesorter. You need Javascript enabled to run these samples, just like you and your users will need Javascript enabled to use tablesorter.

Basic

Sorting

Using Parsers / Extracting Content


Advanced

Parsers / Extracting Content

Widgets / Plugins

Adding / Removing Content

Change Header Style


Other

Options & Events

Metadata - setting inline options

Demos

Playgrounds & Other demos

Custom Parsers

Work-in-progress


Configuration

tablesorter has many options you can pass in at initialization to achieve different effects
TIP! Click on the link in the property column to reveal full details (or toggle|show|hide all) or double click to update the browser location.
PropertyTypeDefaultDescriptionLink
cancelSelectionBooleantrueIndicates if tablesorter should disable selection of text in the table header (TH). Makes header behave more like a button.
cssAscString""Additional CSS class applied to style the header with a ascending sort (v2.11).

Changed to empty string () in v2.11, as the class will always be added to a header cell with an ascending sort; this option now contains any additional class names to add.

Example from the blue theme:

.tablesorter-blue .tablesorter-headerAsc { background-color: #9fbfdf; background-image: url(black-asc.gif); } Default changed v2.5 to . Default changed v2.1.7 to . Original default:
cssChildRowString"tablesorter-childRow"Add this css class to a child row that should always be attached to its parent. Click on the "cssChildRow" link to toggle the view on the attached child row. Previous default was (Modified v2.4).12
This is an entirely new row, but attached to the row above while sorting
cssChildRow Example HTML: <table width="100%" border="1"> <thead> <tr> <th>Item #</th> <th>Name</th> <th>Available</th> </tr> </thead> <tbody> <tr> <td>12345</td> <td>Toy Car</td> <td>5</td> </tr> <tr class="tablesorter-childRow"> <!-- this row will remain attached to the above row, and not sort separately --> <td colspan="3"> It's a toy car! </td> </tr> <tr> <td>23456</td> <td>Toy Plane</td> <td>2</td> </tr> <tr class="tablesorter-childRow"> <!-- this row will remain attached to the above row, and not sort separately --> <td colspan="3"> It's a toy plane! </td> </tr> <tr class="tablesorter-childRow"> <!-- this row will remain attached to the above two rows, and not sort separately --> <td colspan="3"> and it flies! </td> </tr> </tbody> </table>
cssDescString""Additional CSS class applied to style the header with a descending sort (v2.11).

Changed to empty string in v2.11, as the class will always be added to a header cell with a descending sort; this option now contains any additional class names to add.

Example from the blue theme:

.tablesorter-blue .tablesorter-headerDesc { background-color: #8cb3d9; background-image: url(black-desc.gif); } Default changed v2.5 to . Default changed v2.1.7 to . Original default:
cssIconString"tablesorter-icon"The CSS style used to style the header cell icon (modified v2.7).


As of v2.4, an element, with this class name, is automatically appended to the header cells. To prevent the plugin from adding an element to the headers, set the option to an empty string.

In v2.7, the icon will only be added to the header if both the option is set AND the option includes the icon tag ().

cssIconAscString""The CSS style added to the header cell icon when the column has an ascending sort (v2.18.3).


This class is only applied when the option includes a tag or an HTML element with the class name from the option.

cssIconDescString""The CSS style used to style the header cell icon when the column has a descending sort (v2.18.3)


This class is only applied when the option includes a tag or an HTML element with the class name from the option.

cssIconNoneString""The CSS style used to style the header cell icon when the column does not have a sort applied (v2.18.3)


This class is only applied when the option includes a tag or an HTML element with the class name from the option.

cssNoneString""Additional CSS class applied to style the header when no sort is applied (v2.15).


A class will always be added to an unsorted header cell; this option contains any additional class names to add. Currently, no themes use this class name.

cssProcessingString""Additional CSS class applied to style the header cell while it is being sorted or filtered (v2.4; v2.11).

Changed to empty string in v2.11, as the class will always be added to a table cells during processing; this option now contains any additional class names to add.

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 option to .

cssInfoBlockString"tablesorter-infoOnly"All tbodies with this class name will not have its contents sorted. (v2.2).

With the addition of multiple tbody sorting in v2.2, you can now insert a non-sorting tbody within the table by adding this class to the tbody. <tbody class="tablesorter-infoOnly"> <tr> <th>The contents of this tbody</th> </tr> <tr> <td>will not be sorted</td> </tr> </tbody> As an example, I've split up this options table into three (3) tbodies. The first contains the active options, the second is the info block with a row that only contains the text "Deprecated Options", and the last tbody contains the deprecated options. Sort the table to see how each tbody sorts separately.

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.

cssAllowClicksString"tablesorter-allowClicks"Class name added to table header which allows clicks to bubble up. (v2.18.1).
dateFormatString"mmddyyyy"Set the date format. Here are the available options. (Modified v2.0.23).
  • (default)
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. Individual columns can be modified by adding the following (they all do the same thing), set in order of priority (Modified v2.3.1):
  • jQuery data .
  • metadata . This requires the metadata plugin.
  • headers option .
  • header class name .
  • Overall option.
Example
debugBooleanfalse Boolean flag indicating if tablesorter should display debuging information useful for development. Example
delayInitBooleanfalse Setting this option to true will delay parsing of all table cell data until the user initializes a sort. This speeds up the initialization process of very large tables, but the data still needs to be parsed, so the delay is still present upon initial sort. Example
emptyToString"bottom" Boolean flag indicating how tablesorter should deal with empty table cells. (Modified v2.1.16, v2.16.2).
  • - sort empty table cells to the bottom.
  • - sort empty table cells to the top.
  • or - sort empty table cells as if the cell has the value equal to zero.
  • - sort empty table cells as having a value greater than the max (more positive) value (v2.16.2).
  • - sort empty table cells as having a value greater than the min (more negative) value (v2.16.2).
Individual columns can be modified by adding the following (they all do the same thing), set in order of priority:
  • jQuery data .
  • metadata . This requires the metadata plugin.
  • headers option .
  • header class name .
  • Overall option.
option was added in v2.1.11, then replaced by the option in v2.1.16.
Example
ignoreCaseBooleantrueWhen true, text sorting will ignore the character case. If false, upper case characters will sort before lower case. (v2.2).
imgAttrString"alt" Used by the image parser to grab the image attribute content (v2.17.5; moved to tablesorter core in v2.18.0; see ).

Change this setting to grab a different image attribute to be used for sorting:
initializedFunctionnullThis callback fires when tablesorter has completed initialization. (v2.2).
* Note: bind to all initialization events before initializing tablesorter; because most of the time, if bound after, the events will fire before the binding occurs.
initWidgetsBooleantrueApply widgets after table initializes (v2.3.5).

When true, all widgets set by the option will apply after tablesorter has initialized, this is the normal behavior.

If false, the each widget set by the option will be initialized, meaning the "init" function is run, but the format function will not be run. This is useful when running the pager plugin after the table is set up. The pager plugin will initialize, then apply all set widgets.

Why you ask? Well, lets say you have a table with 1000 rows that will have the pager plugin applied to it. Before this option, the table would finish its setup, all widgets would be applied to the 1000 rows, pager plugin initializes and reapplies the widgets on the say 20 rows showing; making the widget application to 100 rows unnecessary and a waste of time. So, when this option is false, widgets will only be applied to the table after the pager is set up.

widgetClassString'widget-{name}'When the table has a class name that matches the template and a widget id that matches the , the widget will automatically be added to the table (v2.18.0)


By default, this option is set to . So if the table has a class name of the zebra widget will be automatically added to the option and applied to the table.

Some widget ID's with special characters may not be detected; ID's with letters, numbers, underscores and/or dashes will be correctly detected.

The template string *must* contain the tag.

onRenderTemplateFunctionnull This function is called after the template string has been built, but before the template string is applied to the header and before the function is called (v2.7).

The function receives a column index and template string parameters. The template string, from the option, will already have the and tags replaced; it's just a string of formatted HTML. When done manipulating this string, return it. Here is an example: The parameter can be manipulated as a string, or if you prefer, turn it into a jQuery object () to find and replace content as desired. Just make sure you return a string ()

From the example function above, you'll end up with something similar to this HTML (only the thead is shown)<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>* Note: If the option is an empty string, the tag will also become an empty string.
Example
selectorRemoveString"tr.remove-me"This CSS class name can be applied to all rows that are to be removed prior to triggering a table update. (v2.1).


It was necessary to add this option because some widgets add table rows for styling (see the writing custom widgets demo) and if a table update is triggered () those added rows will automatically become incorporated into the table.

selectorSortString"th, td"jQuery selector of content within that is clickable to trigger a sort (v2.4).Example
showProcessingBooleanfalseShow an indeterminate timer icon in the header when the table is sorted or filtered. Please note that due to javascript processing, the icon may not show as being animated. I'm looking into this further and would appreciate any feedback or suggestions with the coding (v2.4).Example
sortForceArraynullUse to add an additional forced sort that is prepended to .

For example, 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 option will be applied. More explicitly:

There are three options to determine the sort order and this is the order of priority:
  1. forces the user to have this/these column(s) sorted first (null by default).
  2. is the initial sort order of the columns.
  3. 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: where is a zero-based index for your columns left-to-right and is 0 for Ascending and 1 for Descending. A valid argument that sorts ascending first by column 1 and then column 2 looks like: .
Example
sortListArraynullUse to add an initial sort to the table.

The value contains an array of instructions for per-column sorting and direction in the format: 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: . Please see for more details on other sort order options.
This option can also be set using jQuery data (v2.3.1) or metadata on the table:
jQuery data**
Meta data
Example
sortAppendArraynullUse to add an additional forced sort that will be appended to the dynamic selections by the user.


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: where 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: . Please see for more details on other sort order options.

Example
sortInitialOrderString"asc" This sets the direction a column will sort when clicking on the header for the first time. Valid arguments are for Ascending or for Descending.

This order can also be set by desired column using the option (v2.0.8).

Individual columns can be modified by adding the following (they all do the same thing), set in order of priority (modified v2.3.1):
  • jQuery data .
  • metadata . This requires the metadata plugin.
  • headers option .
  • header class name .
  • Overall option.
12
sortLocaleCompareBooleanfalse Boolean flag indicating if certain accented characters within the table will be replaced with their equivalent characters. (Modified v2.2).
  • This option no longer switches the sort to use the method.
  • When this option is , the text parsed from table cells will convert accented characters to their equivalent to allow the alphanumeric sort to properly sort.
  • If (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
    • replaced with
    • replaced with
    • replaced with
    • replaced with
    • replaced with
    • replaced with
  • Please see the example page for instrcutions on how to modify the above equivalency table.
  • If you would like to continue using the method, then set the option to and use the new 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.

Example
sortResetBooleanfalse Setting this option to will allow you to click on the table header a third time to reset the sort direction. (v2.0.27).


Don't confuse this option with the method. This option only resets the column sort after a third click, while the method immediately resets the entire table sort.

Example
sortResetKeyString"ctrlKey"The key used to reset sorting on the entire table. Defaults to the control key. The other options are or (reference).
sortRestartBooleanfalse Setting this option to will start the sort with the when clicking on a previously unsorted column. (v2.0.31). Example
sortStableBooleanfalse Setting this option to and sorting two rows with exactly the same content, the original sort order is maintained (v2.14).


This isn't exactly a stable sort because the sort order maintains the original unsorted order when sorting the column in an ascending direction. When sorting the column in a descending order, the opposite of the original unsorted order is returned. If that doesn't make any sense, please refer to issue #419.

sortMultiSortKeyString"shiftKey"The key used to select more than one column for multi-column sorting. Defaults to the key. The other options are or (reference).Example
stringToString"max" A key word indicating how tablesorter should deal with text inside of numerically sorted columns. (v2.1.16).

String options was initially set in the header options only. Overall option added and values changed in version 2.1.16; setting the value to:
  • will treat any text in that column as a value greater than the max (more positive) value. Renamed from "max+".
  • will treat any text in that column as a value greater than the min (more negative) value. Renamed from "max-".
  • will always sort the text to the top of the column.
  • will always sort the text to the bottom of the column.
  • or will treat the text as if it has a value of zero.
Individual columns can be modified by adding the following (they all do the same thing), set in order of priority:
  • jQuery data .
  • metadata . This requires the metadata plugin.
  • headers option .
  • header class name .
  • Overall option.
Example
tabIndexBooleantrueAdd a tabindex to the headers for keyboard accessibility; this was previously always applied (v2.14).
tableClassString""Additional CSS class applied to style the table (v2.11).

Changed to empty string in v2.11, as the class will always be added to the table; this option now contains any additional class names to add.

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.

Modify this option if you are not using the default css, or if you are using a completely custom stylesheet.
themeString"default"This option will add a theme css class name to the table for styling (v2.4; v2.18.0).


When changing this theme option, make sure that the appropriate css theme file has also been loaded. Included theme files include: see all themes

Example
textAttributeString"data-text"This data-attribute can be added to any tbody cell and can contains alternate cell text (v2.16.0).

This option contains the name of the data-attribute used by the function. Add it to the cell(s) as follows: <td data-text="1">First repository</td>Note This option only works when the option is set to "basic".
namespaceStringundefined This option should contain a unique namespace for each table; it is used when binding to event listeners (v2.15.7).

Notes about this namespace option:
  • If a namesspace is not defined, a (hopefully) unique random namespace will be generated.
  • If defined, any "non-word" characters (anything not "a-z", "0-9" or "_") within the namespace will be removed.
  • Added or not, the namespace will be saved with a leading period (e.g. ".myuniquetableid")
numberSorterFunctionnull Replace the default number sorting algorithm with a custom one using this option (v2.12).

Here is an example: The direction parameter (boolean) is merely for informational purposes as the plugin automatically switches and depending on the sort direction ( i.e. there's no need to worry about reverse sorting, it's taken care of by the plugin ).
textSorterFunctionnull Replace the default sorting algorithm with a custom one using this option (v2.12) - *NOTE* The parameters have changed!!.

Include a script like naturalSort.js as follows: or use the localeCompare sort In v2.12, the option will now accept a text sorter per column: The direction parameter (boolean) is merely for informational purposes as the plugin automatically switches and depending on the sort direction ( i.e. there's no need to worry about reverse sorting, it's taken care of by the plugin ).
12
usNumberFormatBooleantrue Indicates how tablesorter should deal with a numerical format: (v2.1.3).
U.S.
German:
French:

Example
widgetsArray[ ] (empty array) Initialize widgets using this option ( e.g. , or custom widgets , see this demo on how to write your own custom widget ). Example
widthFixedBooleanfalse Indicates if tablesorter should apply fixed percentage-based widths to the table columns (modified v2.4).

Prior to v2.4, this option set pixel widths to added colgroups to fix the column widths. This is useful for the Pager companion.
This is now part of the jQuery core.

Example
widgetOptionsObject{ } In version 2.1, all widget options have been moved into this option. 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. (v2.1).

Previously documented widget options , and will be retained for backwards compatibility.

Use the option as follows, please note that each option is followed by a comma (except the last one):
Example
Utility Options
dataObject, ArrayundefinedStorage for processed table build widget data (array, object, string) (v2.11).Example
dateRangeNumeric50 Used by the two digit year parser to set the date range (v2.14).Example
fixedUrlStringundefined This option was added to set a specific page when storing data using the code (v2.12).


More specifically, when the storage function is used, it attempts to give every table a unique identifier using both the page url and table ID (or index on the page if no id exists). This option allows you to override the current page url (it doesn't need to be a url, just some constant value) and save data for multiple tables across a domain.

The table url & id can also be overridden by setting table data attributes (url) and (id)
(e.g. )

For a bit more detail, specifically on how to use the new storage function options for a custom widget, please refer to issue #389.

Deprecated Options
widgetColumnsObject with Array{ css: [ "primary", "secondary", "tertiary" ] } This option is being deprecated! It has been replaced by ; but is still available for backwards compatibility.

When the column styling widget is initialized, it automatically applied the default class names of for the primary sort, for the next sort, for the next sort, and so on (add more as needed)... (v2.0.17). Use the option to change the css class name as follows:
widgetUithemeObject with Array{ css: [ "ui-icon-arrowthick-2-n-s", "ui-icon-arrowthick-1-s", "ui-icon-arrowthick-1-n" ] } This option is being deprecated! It has been replaced by ; but is still available for backwards compatibility.

Used when the ui theme styling widget is initialized. It automatically applies the default class names of for the unsorted column, for the descending sort and for the ascending sort. (v2.0.9). Find more jQuery UI class names by hovering over the Framework icons on this page: http://jqueryui.com/themeroller/

Use the option to change the css class name as follows:
widgetZebraObject with Array{ css: [ "even", "odd" ] } This option is being deprecated! It has been replaced by ; but is still available for backwards compatibility.

When the zebra striping widget is initialized, it automatically applied the default class names of and . Use the option to change the css class name as follows:

Widget & Pager Options

Widget PriorityNameRequires jQueryLimiting function
30columnsv1.2.6
50filterv1.4.31.4.3 (nextUntil & delegate)
Lastpager pluginv1.2.6
55pager widgetv1.71.7 (on)
40resizablev1.4.1*1.4 (isEmptyObject); 1.4.1 (parseJSON)*
20saveSortv1.4.11.4.1 (parseJSON)*
60stickyHeadersv1.2.6
10uithemev1.2.6
90zebrav1.2.6
tablesorter widgets have many options, and to better organize them, they now are grouped together inside of the . Thanks to thezoggy for putting together this jQuery-widget compatibility table, but please note:
  • The applied order of widget is dependent of the widget priority, from low to high.
  • Widget priority values do not need to be unique. Any new widget without a defined priority will automatically have a priority of .
  • The pager, being a plugin, is actually initialized after tablesorter has initialized and all selected widgets applied.
  • * The and widgets use the function by default and thus need the function which is available in jQuery 1.4.1+.

TIP! Click on the link in the property column to reveal full details (or toggle|show|hide all) or double click to update the browser location.

0 thoughts on “Tablesorter Asc Descriptive Essay

Leave a Reply

Your email address will not be published. Required fields are marked *