diff --git a/docs/css/jq.css b/docs/css/jq.css index 3cfb2698..115e6026 100644 --- a/docs/css/jq.css +++ b/docs/css/jq.css @@ -52,7 +52,7 @@ div.digg {float: right;} .right { text-align:right; } #pager-demo th.remove { width: 20px; } /* pager demo */ #pager-demo button.remove { width: 20px; height: 20px; font-size: 10px; color: #800; } -.box { width: 48%; float: left; padding: 0 1%; } +.box { width: 48%; min-width: 300px; float: left; padding: 0 1%; } a.deprecated { color: #a00; } span.deprecated { background: #a00; color: #fff; padding: 1px 3px; } .hidden { display: none; } diff --git a/docs/example-child-rows-filtered.html b/docs/example-child-rows-filtered.html index 77673498..f683ae6b 100644 --- a/docs/example-child-rows-filtered.html +++ b/docs/example-child-rows-filtered.html @@ -25,11 +25,18 @@ // this is the default setting cssChildRow: "expand-child", - // include child row content while filtering, if true - widgetFilterChildRows: true, - // initialize zebra and filter widgets - widgets: ["zebra", "filter"] + widgets: ["zebra", "filter"], + + widgetOptions: { + // include child row content while filtering, if true + filter_childRows : true, + // class name applied to filter row and each input + filter_cssFilter : 'tablesorter-filter', + // search from beginning + filter_startsWith : false + } + }); // hide child rows @@ -49,10 +56,12 @@ // Toggle widgetFilterChildRows option $('button.toggle-option').click(function(){ - var c = $('.tablesorter')[0].config, - o = !c.widgetFilterChildRows; - c.widgetFilterChildRows = o; + var c = $('.tablesorter')[0].config.widgetOptions, + o = !c.filter_childRows; + c.filter_childRows = o; $('.state').html(o.toString()); + // update filter + $('input.tablesorter-filter').trigger('search'); }); }); diff --git a/docs/example-header-column-span.html b/docs/example-header-column-span.html new file mode 100644 index 00000000..a26d6238 --- /dev/null +++ b/docs/example-header-column-span.html @@ -0,0 +1,100 @@ + + + + + jQuery plugin: Tablesorter 2.0 - Sorting Across Multiple Columns + + + + + + + + + + + + + + + + + + +
+ +

+ NOTE! +

+

+ +

Demo

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Sort All Columns
IndexFirst GroupSecond Group
Natural SortNumericAnimalsUrl
IndexNatural SortNumericAnimalsUrl
0abc 12310Koalahttp://www.google.com
1abc 1234Oxhttp://www.yahoo.com
2abc 910Girafeehttp://www.facebook.com
3zyx 24767Bisonhttp://www.whitehouse.gov/
4abc 113Chimphttp://www.ucla.edu/
5abc 256Elephanthttp://www.wikipedia.org/
6abc 9155Lionhttp://www.nytimes.com/
7ABC 1087Zebrahttp://www.google.com
8zyx 1999Koalahttp://www.mit.edu/
9zyx 120Llamahttp://www.nasa.gov/
+ +

Javascript

+
+

+	
+

HTML

+
+

+	
+ +
+
+ Next up: Dealing with digits! ›› +
+ +
+ + + + diff --git a/docs/example-locale-sort.html b/docs/example-locale-sort.html index e06d47a0..a5d10cdd 100644 --- a/docs/example-locale-sort.html +++ b/docs/example-locale-sort.html @@ -53,8 +53,8 @@ $("table").tablesorter({ // Enable use of the characterEquivalents reference sortLocaleCompare : true, - // upper case sorts BEFORE lower case - ignoreCase : false + // if false, upper case sorts BEFORE lower case + ignoreCase : true }); }); diff --git a/docs/example-multiple-tbodies.html b/docs/example-multiple-tbodies.html index 9b1c80f8..b9d302b6 100644 --- a/docs/example-multiple-tbodies.html +++ b/docs/example-multiple-tbodies.html @@ -90,7 +90,7 @@

- Next up: Dealing with digits! ›› + Next up: Sorting Across Multiple Columns ››
diff --git a/docs/example-option-digits.html b/docs/example-option-digits.html index 33a140f2..658bc8ff 100644 --- a/docs/example-option-digits.html +++ b/docs/example-option-digits.html @@ -32,7 +32,12 @@

- NOTE! 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). + NOTE! +

Demo

diff --git a/docs/index.html b/docs/index.html index c09df5ca..ee351a2e 100644 --- a/docs/index.html +++ b/docs/index.html @@ -43,30 +43,6 @@ or GPL licenses.

-

- Note! Version 2.0.3 of the tablesorter docs are available in russian, head over to tablesorter.ru -

- -

- Helping out! If you like tablesorter and you're feeling generous, take a look at my Amazon Wish List or make a donation. -

- -
- - - - - - - - - -
- -

Comments and love letters can be sent to: .

- -

-

Contents

    @@ -75,7 +51,7 @@
  1. Getting started
  2. Examples
  3. Configuration
  4. -
  5. Widget Options New! v2.1
  6. +
  7. Widget Options (New v2.1)
  8. Methods
  9. Events
  10. Download
  11. @@ -97,9 +73,6 @@
  12. Multi-column sorting
  13. Multi-tbody sorting - see the options table below
  14. Parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time. Add your own easily
  15. -
  16. Support secondary "hidden" sorting (e.g., maintain alphabetical sort when sorting on other criteria)
  17. Extensibility via widget system
  18. Cross-browser: IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+
  19. @@ -290,11 +263,12 @@
  20. Lock sort order using header options
  21. Set initial sort order using header options
  22. Using sortReset & sortRestart options
  23. -
  24. Sorting empty cells New! v2.1.11
  25. +
  26. Sorting empty cells (v2.1.11)
  27. Change the default multi-sorting key
  28. Custom sort script New! v2.2
  29. Sorting Accented Characters New! v2.2
  30. Sorting with Multiple Tbodies New! v2.2
  31. +
  32. Sorting Across Multiple Columns New! v2.3
  33. Parsers / Extracting Content

    @@ -305,7 +279,7 @@
  34. Disable or set the column parser using jQuery Data New! v2.3
  35. Changing the date format (v2.0.23)
  36. Parser, writing your own
  37. -
  38. Parser, writing your own, advanced use New! v2.1
  39. +
  40. Parser, writing your own, advanced use (New v2.1)
  41. Dealing with markup inside cells (textExtraction function)
  42. @@ -321,7 +295,7 @@
  43. Zebra stripe widget
  44. Widgets, writing your own
  45. Pager plugin
  46. -
  47. Pager plugin - ajax New! v2.1
  48. +
  49. Pager plugin - ajax (New v2.1)
@@ -375,7 +349,7 @@

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

@@ -400,7 +374,7 @@ - + @@ -514,7 +488,7 @@ - - - - + - + @@ -679,10 +653,10 @@ - + - + @@ -728,7 +702,7 @@ - +
cancelSelectioncancelSelection Boolean true Indicates if tablesorter should disable selection of text in the table header (TH). Makes header behave more like a button.cssInfoBlock String "tablesorter-infoOnly"All tbodies with this class name will not have its contents sorted. New! v2.2 + All tbodies with this class name will not have its contents sorted. New! 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. @@ -540,7 +514,7 @@
selectorRemove String "tr.remove-me"This CSS class name can be applied to all rows that are to be removed prior to triggering a table update. New! v2.1 + This CSS class name can be applied to all rows that are to be removed prior to triggering a table update. (New 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 ($('table').trigger('update');) those added rows will automatically become incorporated into the table. @@ -553,7 +527,7 @@
dateFormat String "mmddyyyy"Set the date format. Here are the available options. Modified in version 2.0.23. + Set the date format. Here are the available options. (Modified v2.0.23).
  • "mmddyyyy" (default)
  • @@ -585,7 +559,7 @@
debugdebug Boolean false @@ -599,7 +573,7 @@ String "bottom" - Boolean flag indicating how tablesorter should deal with empty table cells. Modified! v2.1.16. + Boolean flag indicating how tablesorter should deal with empty table cells. (Modified v2.1.16).
  • bottom - sort empty table cells to the bottom.
  • @@ -621,7 +595,7 @@
headerListheaderList Array [ ] (empty array) Internal list of each header element as selected using jQuery selectors in the selectorHeaders option. Not really useful for normal usage.
ignoreCaseignoreCase Boolean trueWhen true, text sorting will ignore the character case. If false, upper case characters will sort before lower case.When true, text sorting will ignore the character case. If false, upper case characters will sort before lower case. New! v2.2.
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: "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.

@@ -743,10 +717,15 @@ - selectorHeaders + selectorHeaders String - "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. + "> 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. +
Added > to the selector in version 2.3 to prevent targetting nested table headers. Modified! v2.3 +
+ @@ -754,7 +733,7 @@ sortForce Array null - Use to add an additional forced sort that is prepended to sortList. + Use to add an additional forced sort that is prepended to sortList.

For example, sortForce: [[0,0]] will sort the first column in ascending order. After the forced sort, the user selected column(s), or during initialzation, the sorting order defined in the sortList will follow. And lastly, the sort defined in the sortAppend option will be applied. More explicitly:
@@ -806,7 +785,7 @@ - sortInitialOrder + sortInitialOrder String "asc" @@ -839,7 +818,7 @@
  • Please see the example page for instrcutions on how to modify the above equivalency table.
  • -
  • If you would like to continuing using the String.localeCompare method, then set the sortLocaleCompare option to false and use the new textSorter option as follows: +
  • If you would like to continuing 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);
    @@ -854,30 +833,30 @@
     			
     
     			
    -				sortReset
    +				sortReset
     				Boolean
     				false
     				
    -					Setting this option to true will allow you to click on the table header a third time to reset the sort direction. New in v2.0.27.
    +					Setting this option to true will allow you to click on the table header a third time to reset the sort direction. (New v2.0.27).
     				
     				Example
     			
     
     			
    -				sortRestart
    +				sortRestart
     				Boolean
     				false
     				
    -					Setting this option to true will start the sort with the sortInitialOrder when clicking on a previously unsorted column. New in v2.0.31.
    +					Setting this option to true will start the sort with the sortInitialOrder when clicking on a previously unsorted column. (New v2.0.31).
     				
     				Example
     			
     
     			
    -				sortMultiSortKey
    +				sortMultiSortKey
     				String
     				"shiftKey"
    -				The key used to select more than one column for multi-column sorting.  Defaults to the shift key.  The other options are "ctrlKey" or "altKey". Reference: http://developer.mozilla.org/en/docs/DOM:event#Properties
    +				The key used to select more than one column for multi-column sorting.  Defaults to the shift key.  The other options are "ctrlKey" or "altKey". Reference: https://developer.mozilla.org/en/DOM/MouseEvent
     				Example
     			
     
    @@ -886,7 +865,7 @@
     				String
     				"max"
     				
    -					Boolean flag indicating how tablesorter should deal with text inside of numerically sorted columns. New! v2.1.16.
    +					Boolean flag indicating how tablesorter should deal with text inside of numerically sorted columns. (New 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:
      @@ -910,7 +889,7 @@ - tableClass + tableClass String "tablesorter" 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. @@ -989,7 +968,7 @@ $(function(){ Boolean true - Indicates how tablesorter should deal with a numerical format: New! in v2.1.3. + Indicates how tablesorter should deal with a numerical format: (New v2.1.3).
      @@ -1009,7 +988,7 @@ $(function(){ - + - + - - + + - + - +
      widgetswidgets Array [ ] (empty array) @@ -1019,7 +998,7 @@ $(function(){
      widthFixedwidthFixed Boolean false @@ -1034,7 +1013,7 @@ $(function(){ Object { } - As of 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. New! in v2.1. + As of 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. (New v2.1).

      Previously documented widget options widgetZebra, widgetColumns and widgetUitheme will be retained for backwards compatibility.
      @@ -1093,8 +1072,8 @@ $(function(){
      widgetColumns
      widgetColumns Object with Array { css:[ "primary", "secondary", "tertiary" ] } @@ -1102,7 +1081,7 @@ $(function(){ It has been replaced by widgetOptions.columns; but is still available for backwards compatibility.

      - When the column styling widget is initialized, it automatically applied the default class names of "primary" for the primary sort, "secondary" for the next sort, "tertiary" for the next sort, and so on (add more as needed)... New in v2.0.17. + When the column styling widget is initialized, it automatically applied the default class names of "primary" for the primary sort, "secondary" for the next sort, "tertiary" for the next sort, and so on (add more as needed)... (New v2.0.17). Use the widgetColumns option to change the css class name as follows:
      $(function(){
         $("table").tablesorter({
      @@ -1115,7 +1094,7 @@ $(function(){
       			
      widgetUithemewidgetUitheme Object with Array { css: [ "ui-icon-arrowthick-2-n-s", "ui-icon-arrowthick-1-s", "ui-icon-arrowthick-1-n" ] } @@ -1123,7 +1102,7 @@ $(function(){ It has been replaced by widgetOptions.uitheme; but is still available for backwards compatibility.

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

      Use the widgetUitheme option to change the css class name as follows: @@ -1144,7 +1123,7 @@ $(function(){
      widgetZebrawidgetZebra Object with Array { css: [ "even", "odd" ] } @@ -1172,7 +1151,7 @@ $(function(){

      tablesorter widgets have many options, and to better organize them, they now are grouped together inside of the widgetOptions
      - TIP! Click on the link in the property column to reveal full details (or toggle|show|hide all) + 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.

      @@ -1201,7 +1180,7 @@ $(function(){
      Array [ "primary", "secondary", "tertiary" ] - columns widget: When the column styling widget is initialized, it automatically applied the default class names of "primary" for the primary sort, "secondary" for the next sort, "tertiary" for the next sort, and so on (add more as needed)... Modified! in v2.1. + columns widget: When the column styling widget is initialized, it automatically applied the default class names of "primary" for the primary sort, "secondary" for the next sort, "tertiary" for the next sort, and so on (add more as needed)... (Modified v2.1).

      Use the "columns" option to change the css class name as follows: @@ -1223,7 +1202,7 @@ $(function(){
      false Filter widget: If there are child rows in the table (rows with class name from "cssChildRow" option) and this option is true and a match is found anywhere in the child row, then it will make that row visible. - Modified! in v2.1. + (Modified v2.1).

      Use the filter_childRows option include child row text as follows: @@ -1245,7 +1224,7 @@ $(function(){
      'tablesorter-filter' Filter widget: This is the class name applied to the filter header row (tr) and each input within that row. If you change it from the default class name of "tablesorter-filter" make sure you also update the css! - New! in v2.1. + (New v2.1).

      Use the "tablesorter-filter" option to change the css class name as follows: @@ -1267,8 +1246,7 @@ $(function(){
      Boolean false - Filter widget: Set this option to true to use the filter to find text from the start of the column, so typing in "a" will find "albert" but not "frank", both have a's. - New! in v2.1. + Filter widget: Set this option to true to use the filter to find text from the start of the column, so typing in "a" will find "albert" but not "frank", both have a's. (New v2.1).

      Use the filter_startsWith option as follows: @@ -1289,8 +1267,7 @@ $(function(){
      String 'tablesorter-stickyHeader' - stickyHeaders widget: This is the class name applied to the sticky header row (tr). If you change it from the default class name of "tablesorter-stickyHeader" make sure you also update the css! - New! in v2.1. + stickyHeaders widget: This is the class name applied to the sticky header row (tr). If you change it from the default class name of "tablesorter-stickyHeader" make sure you also update the css! (New v2.1).

      Use the "stickyHeaders" option to change the css class name as follows: @@ -1312,7 +1289,7 @@ $(function(){
      Array [ "ui-icon-arrowthick-2-n-s", "ui-icon-arrowthick-1-s", "ui-icon-arrowthick-1-n" ] - uitheme widget: This widget option replaces the previous widgetUitheme. It is used when the ui theme styling widget is initialized. It automatically applies the default class names of "ui-icon-arrowthick-2-n-s" for the unsorted column, "ui-icon-arrowthick-1-s" for the descending sort and "ui-icon-arrowthick-1-n" for the ascending sort. Modified! in v2.1. + uitheme widget: This widget option replaces the previous widgetUitheme. It is used when the ui theme styling widget is initialized. It automatically applies the default class names of "ui-icon-arrowthick-2-n-s" for the unsorted column, "ui-icon-arrowthick-1-s" for the descending sort and "ui-icon-arrowthick-1-n" for the ascending sort. (Modified v2.1).

      Find more jQuery UI class names by hovering over the Framework icons on this page: http://jqueryui.com/themeroller/
      @@ -1339,7 +1316,7 @@ $(function(){
      Array [ "even", "odd" ] - zebra widget: When the zebra striping widget is initialized, it automatically applied the default class names of "even" and "odd". Modified! in v2.1. + zebra widget: When the zebra striping widget is initialized, it automatically applied the default class names of "even" and "odd". (Modified v2.1).

      Use the "zebra" option to change the css class name as follows: @@ -1364,7 +1341,7 @@ $(function(){

      tablesorter has some methods available to allow updating, resorting or applying widgets to a table after it has been initialized.
      - TIP! Click on the link in the method column to reveal full details (or toggle|show|hide all): + TIP! Click on the link in the method column to reveal full details (or toggle|show|hide all) or double click to update the browser location.

      @@ -1379,7 +1356,7 @@ $(function(){ -
      addRowsUse this method to add table rows. New in v2.0.16 + Use this method to add table rows. (New v2.0.16).
      It does not work the same as "update" in that it only adds rows, it does not remove them.
      Also, use this method to add table rows while using the pager plugin. If the "update" method is used, only the visible table rows continue to exist. @@ -1521,7 +1498,7 @@ $("table")

      tablesorter has some methods available to allow updating, resorting or applying widgets to a table after it has been initialized.
      - TIP! Click on the link in the event column to reveal full details (or toggle|show|hide all): + TIP! Click on the link in the event column to reveal full details (or toggle|show|hide all) or double click to update the browser location.

      @@ -1580,7 +1557,7 @@ $("table") - -
      pagerChangeThis event fires when the pager plugin begins to render the table on the currently selected page. New in v2.0.7. + This event fires when the pager plugin begins to render the table on the currently selected page. (New v2.0.7).
      $(function(){
       
      @@ -1606,7 +1583,7 @@ $("table")
       
       			
      pagerCompleteThis event fires when the pager plugin has completed its render of the table on the currently selected page. New in v2.0.7. + This event fires when the pager plugin has completed its render of the table on the currently selected page. (New v2.0.7).
      $(function(){
       
      @@ -1651,14 +1628,14 @@ $("table")
       		
    • jQuery Metadata 2.1 (6kb, required for setting inline options)
    • jquery.tablesorter.js (35kb/19kb min)
    • jquery.tablesorter.pager.js (14kb/7kb min, demo)
    • -
    • jquery.tablesorter.widgets.js (16kb/8kb min, includes the jQuery UI theme, columns styling, resizable columns, filter, sticky header and save sort widgets. Updated! in v2.1.)
    • +
    • jquery.tablesorter.widgets.js (16kb/8kb min, includes the jQuery UI theme, columns styling, resizable columns, filter, sticky header and save sort widgets. (Updated v2.1)
    • Themes:
      • Green Skin - Images and CSS styles for green themed headers
      • Blue Skin - Images and CSS styles for blue themed headers (as seen in the examples)
      • -
      • jQuery UI Theme - Apply any jQuery UI theme to the table using the "uitheme" widget code. New in v2.0.9!
      • +
      • jQuery UI Theme - Apply any jQuery UI theme to the table using the "uitheme" widget code. (New v2.0.9).
      diff --git a/docs/js/docs.js b/docs/js/docs.js index fd81e3f9..c72bb7d2 100644 --- a/docs/js/docs.js +++ b/docs/js/docs.js @@ -35,11 +35,23 @@ $(function(){ return false; }); + var animating = false; + $('.collapsible').hide(); - $('.toggle2').click(function(){ - $(this).closest('tr').find('.collapsible').slideToggle(); - return false; - }); + $('.toggle2') + .click(function(e){ + if (!animating) { + animating = true; + $(this).closest('tr').find('.collapsible').slideToggle(); + setTimeout(function(){ animating = false; }, 200); + } + return false; + }); + $('.toggle2, span.permalink') + .dblclick(function(){ + window.location.hash = '#' + $(this).closest('tr')[0].id; + return false; + }); $('.toggleAll, .showAll, .hideAll').click(function(){ var t = $.trim($(this).text()); @@ -55,8 +67,31 @@ $(function(){ }); +function showProperty(){ + var prop, h = window.location.hash; + if (h) { + var prop = $(h); + if (prop.length) { + prop.find('.collapsible').show(); + if (h === '#csschildrow') { + $('#root .expand-child').show(); + } + // move below sticky header + if (/options/.test(prop.closest('table')[0].id)) { + $(window).scrollTop( prop.position().top - 30 ); + } + } + } +}; + $(window).load(function(){ $(".js").chili(); $(".html").chili(); $(".css").chili(); + + $(window).bind('hashchange', function(){ + showProperty(); + }); + showProperty(); + }); \ No newline at end of file