',
$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.
+ // resort table using the current sort; set to false to prevent resort, otherwise
+ // any other value in resort will automatically trigger the table resort.
resort = true;
$('table')
.find('tbody').append($row)
@@ -57,13 +57,13 @@
NOTE!
-
-
Click on the [ Add Rows ] button to add two new rows.
-
The "addRows" method was added in version 2.0.16, and is not part of the original plugin.
-
This example could have used the "update" method to add rows, but to remove rows only the "update" method works.
-
This method is better used for the pager plugin when not all of the rows are displayed.
-
-
+
+
+
Click on the [ Add Rows ] button to add two new rows.
+
The "addRows" method was added in version 2.0.16, and is not part of the original plugin.
+
This example could have used the "update" method to add rows, but to remove rows only the "update" method works.
+
This method is better used for the pager plugin when not all of the rows are displayed.
Click the link in the Order # column to reveal the hidden child row cells
- (original demo).
-
This option is available in the original plugin.
-
This demo had the default child row class name changed from "expand-child" to "tablesorter-childRow" in v2.4.
-
As of v2.15.12,
-
-
Parents of child rows now have a tablesorter-hasChildRow class name added.
-
The last row of each page now includes any child rows. For example, on page 1, click on the "SO71783" row link and the associated child row will now show, as it should
-
NOTE! A new css definition was added to every default theme; the "filtered" class name (set by the filter_filteredRow widgetOption) has been added to properly hide/show child rows when filtered. Please see the Child Rows with Filter Widget demo.
-
The additional code to always hide child row cells on pagerChange is no longer needed.
-
-
-
-
+
+
+
Click the link in the Order # column to reveal the hidden child row cells
+ (original demo).
+
This option is available in the original plugin.
+
This demo had the default child row class name changed from "expand-child" to "tablesorter-childRow" in v2.4.
+
As of v2.15.12,
+
+
Parents of child rows now have a tablesorter-hasChildRow class name added.
+
The last row of each page now includes any child rows. For example, on page 1, click on the "SO71783" row link and the associated child row will now show, as it should
+
NOTE! A new css definition was added to every default theme; the "filtered" class name (set by the filter_filteredRow widgetOption) has been added to properly hide/show child rows when filtered. Please see the Child Rows with Filter Widget demo.
+
The additional code to always hide child row cells on pagerChange is no longer needed.
Having a colspan in the tbody is not fully supported by all widgets, and there are still some minor issues to work out.
-
Alert Cells with a rowspan are not currently supported.
-
Warning Cells with a colspan will attempt to use the parser set for that column and will not use the parser for another column while sorting or filtering - try this - the "17 Koala" cell is not parsed as a numeric value and is thus considered a string.
-
The duplicateSpan option (storing of cache data) is a preliminary step in providing colspan support, it is by no means complete.
-
This demo requires tablesorter v2.25.0+, as well the corresponding version of the filter widget.
+
+
+
Having a colspan in the tbody is not fully supported by all widgets, and there are still some minor issues to work out.
+
Alert Cells with a rowspan are not currently supported.
+
Warning Cells with a colspan will attempt to use the parser set for that column and will not use the parser for another column while sorting or filtering - try this - the "17 Koala" cell is not parsed as a numeric value and is thus considered a string.
+
The duplicateSpan option (storing of cache data) is a preliminary step in providing colspan support, it is by no means complete.
+
This demo requires tablesorter v2.25.0+, as well the corresponding version of the filter widget.
-
Follow the demo steps to hopefully get the full understanding of how to use colspans in the tbody.
-
Ultimately, with the issues noted below, I would not recommend including an entire column in the tbody that does not have a corresponding header cell - don't do what I did in this demo for the first two colums.
-
-
+
Follow the demo steps to hopefully get the full understanding of how to use colspans in the tbody.
+
Ultimately, with the issues noted below, I would not recommend including an entire column in the tbody that does not have a corresponding header cell - don't do what I did in this demo for the first two colums.
The css in this demo only works with modern browsers (IE9+).
-
This css is originally from this CSS-Tricks article; it has been modified to work with tablesorter themes.
-
- It does not work properly on cells with rowspan or colspan within the tbody (I am referring to info-only tbodies, since tablesorter does not yet support sorting with these spans); if you do need a script to highlight spanned columns & rows, then take a look at the wholly plugin.
-
-
-
To add Hover Highlighting:
-
-
Add a class name of "hover-highlight" to enable hover row and column highlighting.
-
Include the CSS shown on this page.
-
If needed, modify the table background color & zebra striping row colors.
-
Modify the hover highlight row and/or column color definitions as desired (they can be different colors).
-
-
-
-
To add Focus Highlighting:
-
-
Add a class name of "focus-highlight" to enable focused cell with row and column highlighting.
-
Click on a table cell in the demo below to see the highlight; only one element, per page, can be active at a time.
-
Include the CSS and the extra javascript shown on this page to make table cells focusable.
-
If needed, modify the table background color & zebra striping row colors.
-
Modify the focus highlight row and/or column color definitions as desired (they can be different colors).
-
-
-
-
+
+
+
The css in this demo only works with modern browsers (IE9+).
+
This css is originally from this CSS-Tricks article; it has been modified to work with tablesorter themes.
+
+ It does not work properly on cells with rowspan or colspan within the tbody (I am referring to info-only tbodies, since tablesorter does not yet support sorting with these spans); if you do need a script to highlight spanned columns & rows, then take a look at the wholly plugin.
+
+
+
To add Hover Highlighting:
+
+
Add a class name of "hover-highlight" to enable hover row and column highlighting.
+
Include the CSS shown on this page.
+
If needed, modify the table background color & zebra striping row colors.
+
Modify the hover highlight row and/or column color definitions as desired (they can be different colors).
+
+
+
+
To add Focus Highlighting:
+
+
Add a class name of "focus-highlight" to enable focused cell with row and column highlighting.
+
Click on a table cell in the demo below to see the highlight; only one element, per page, can be active at a time.
+
Include the CSS and the extra javascript shown on this page to make table cells focusable.
+
If needed, modify the table background color & zebra striping row colors.
+
Modify the focus highlight row and/or column color definitions as desired (they can be different colors).
The extractor type was added in v2.17.6 and allows you to apply two parsers to a column:
-
-
In this demo, the last column contains select dropdowns that have "good", "medium" and "bad" options.
-
So there is a need to use a parser to extract content from the selected option within the select and then use the grades parser to give each grade a sortable value.
The extractor type was added in v2.17.6 and allows you to apply two parsers to a column:
+
+
In this demo, the last column contains select dropdowns that have "good", "medium" and "bad" options.
+
So there is a need to use a parser to extract content from the selected option within the select and then use the grades parser to give each grade a sortable value.
Accented characters will get replaced by their character equivalent when the sortLocaleCompare option is true.
-
In the javascript code block below you can see the default $.tablesorter.characterEquivalents table and an example of how to extend it to include other equivalents.
-
If you have a specific language requirement, please refer to the Language wiki pages to see if it is there. If not, please consider sharing the code or even just share the character equivalents themselves.
-
-
+
+
+
Accented characters will get replaced by their character equivalent when the sortLocaleCompare option is true.
+
In the javascript code block below you can see the default $.tablesorter.characterEquivalents table and an example of how to extend it to include other equivalents.
+
If you have a specific language requirement, please refer to the Language wiki pages to see if it is there. If not, please consider sharing the code or even just share the character equivalents themselves.
Modified the textSorter option to allow setting the sorter per column v2.12:
-
-
*NOTE* The textSorter function parameters have changed! It is now function(a, b, direction, column, table) (previously function(a, b, table, column)).
-
The "Icelandic Alphabet" column is using the Sugar library to sort:
-
-
Solved (4/28/2014)! please note that at the time of this writing, there is an issue with it not sorting properly (ref)
-
You can tell it is working properly when you sort the Icelandic Alphabet column and the numeric column numbers are sequential (see row #37).
-
-
-
The "Plain Text Sort" column is using a basic alphabetical sort (with localeCompare if set). Sort that column, then the last column to see how it differs from an alphanumeric sort.
-
The sorting of empty cells still occurs regardless of the custom textSorter setting.
-
-
-
One custom sort used here is from the original tablesorter plugin v2.0.3. Sort the first "Plain Text Sort" column to see how it sorts alphanumeric data.
-
This option is not part of the original plugin (v2.2).
-
-
+
+
+
Modified the textSorter option to allow setting the sorter per column v2.12:
+
+
*NOTE* The textSorter function parameters have changed! It is now function(a, b, direction, column, table) (previously function(a, b, table, column)).
+
The "Icelandic Alphabet" column is using the Sugar library to sort:
+
+
Solved (4/28/2014)! please note that at the time of this writing, there is an issue with it not sorting properly (ref)
+
You can tell it is working properly when you sort the Icelandic Alphabet column and the numeric column numbers are sequential (see row #37).
+
+
+
The "Plain Text Sort" column is using a basic alphabetical sort (with localeCompare if set). Sort that column, then the last column to see how it differs from an alphanumeric sort.
+
The sorting of empty cells still occurs regardless of the custom textSorter setting.
+
+
+
One custom sort used here is from the original tablesorter plugin v2.0.3. Sort the first "Plain Text Sort" column to see how it sorts alphanumeric data.
+
This option is not part of the original plugin (v2.2).
+
Demo
@@ -147,4 +147,3 @@
-
diff --git a/docs/example-option-date-format.html b/docs/example-option-date-format.html
index 3587288e..202cbd5c 100644
--- a/docs/example-option-date-format.html
+++ b/docs/example-option-date-format.html
@@ -1,8 +1,8 @@
-
- jQuery plugin: Tablesorter 2.0 - Changing the date format
+
+ jQuery tablesorter 2.0 - Changing the date format
@@ -45,22 +45,23 @@
NOTE!
-
-
The dateFormat option was modified in version 2.0.23 (not part of the original plugin).
-
The dateFormat option will ONLY work with the shortDate parser.
-
The date can be separated by any of the following: slash, dash, period, comma, space(s) or tab (/-., ).
-
This date format parser will only work with a four digit year. You can write your own if you need a two digit year parser.
-
In versions 2.3+, date formats can be set by column using any of the following methods (they all do the same thing), in order of priority:
-
-
jQuery data data-date-format="mmddyyyy" (see the Javascript block below on how to set it directly; data-dateFormat is equivalent to data-date-format).
-
metadata class="{ dateFormat: "mmddyyyy" }". This requires the metadata plugin.
The alphanumeric sort working in the first column was added in version 2.0.6 (not part of the original plugin).
-
The above sort was replaced with a natural sort in version 2.2.
-
This example demonstrates that common table values are auto-detected (including plain text, currency, percentages, and positive & negative numbers), so there is no need to set a specific parser unless you notice an issue with how a column is sorting.
-
Issues may arise if a column contains mixed data, e.g. "N/A" is located at the top of a numeric column; in this case the column will be detected as a text column and not a numeric column. If issues occur, add a sorter-digit class name to that header cell.
-
-
+
+
+
Click on any column header to sort that column.
+
The alphanumeric sort working in the first column was added in version 2.0.6 (not part of the original plugin).
+
The above sort was replaced with a natural sort in version 2.2.
+
This example demonstrates that common table values are auto-detected (including plain text, currency, percentages, and positive & negative numbers), so there is no need to set a specific parser unless you notice an issue with how a column is sorting.
+
Issues may arise if a column contains mixed data, e.g. "N/A" is located at the top of a numeric column; in this case the column will be detected as a text column and not a numeric column. If issues occur, add a sorter-digit class name to that header cell.
As of v2.16.3, there is a built-in 500 millisecond delay before the processing icon will show. If the sort has completed within that time, the icon will not appear.
-
There is an issue with the processing icon not appearing at all, or the animation appears frozen when processing data in very large tables. This is due to javascript only being able to process one thread at-a-time; If you know of a solution or work-around please add a comment or contribute a fix!
-
-
+
+
+
As of v2.16.3, there is a built-in 500 millisecond delay before the processing icon will show. If the sort has completed within that time, the icon will not appear.
+
There is an issue with the processing icon not appearing at all, or the animation appears frozen when processing data in very large tables. This is due to javascript only being able to process one thread at-a-time; If you know of a solution or work-around please add a comment or contribute a fix!
+
Javascript
@@ -1135,4 +1135,3 @@
-
diff --git a/docs/example-option-sort-append.html b/docs/example-option-sort-append.html
index d10d07ff..414ff8a3 100644
--- a/docs/example-option-sort-append.html
+++ b/docs/example-option-sort-append.html
@@ -1,8 +1,8 @@
-
- jQuery plugin: Tablesorter 2.0 - Append a default sorting order
+
+ jQuery tablesorter 2.0 - Append a default sorting order
@@ -75,12 +75,12 @@ $(function() {
NOTE!
-
-
In v2.24.0, sortAppend can now be applied based on the primary column sort.
-
Click to sort any column header to see the the first column sort is appended to the selected sort order.
-
This option is part of the original plugin
-
-
+
+
+
In v2.24.0, sortAppend can now be applied based on the primary column sort.
+
Click to sort any column header to see the the first column sort is appended to the selected sort order.
+
This option is part of the original plugin
+
Demo
"First Name" column ascending sort appended to any other sort:
Sort empty table cells as if the cell has the value equal to zero
-
None/zero has a value less than A through Z (in javascript, 0 < 'A' && 0 < 'Z'); so in an alphabetical column, empty cells will sort at the top in an ascending sort & at the bottom in a descending sort.
-
In numerical columns, empty cells will sort as if their value was zero.
-
-
-
-
-
-
Individual columns can be modified by adding the following (they all do the same thing), set in order of priority:
-
-
jQuery data data-empty="top".
-
metadata class="{ empty: 'top'}". This requires the metadata plugin.
emptyToBottom option was added in v2.1.11, then replaced by the emptyTo option in v2.1.16.
-
-
+
+
+
Set the emptyTo selector below:
+
+
top - sort empty table cells to the top.
+
bottom - sort empty table cells to the bottom.
+
none or zero
+
+
Sort empty table cells as if the cell has the value equal to zero
+
None/zero has a value less than A through Z (in javascript, 0 < 'A' && 0 < 'Z'); so in an alphabetical column, empty cells will sort at the top in an ascending sort & at the bottom in a descending sort.
+
In numerical columns, empty cells will sort as if their value was zero.
+
+
+
+
+
+
Individual columns can be modified by adding the following (they all do the same thing), set in order of priority:
+
+
jQuery data data-empty="top".
+
metadata class="{ empty: 'top'}". This requires the metadata plugin.