From 5df7f7781916224370a6d7e83bf944d528772c2e Mon Sep 17 00:00:00 2001 From: Mottie Date: Mon, 25 Mar 2013 09:04:00 -0500 Subject: [PATCH] Added updateAll; plus reorganization & cleanup --- docs/example-add-rows.html | 2 +- docs/example-update-all.html | 114 +++++++++++ docs/index.html | 114 +++++++---- js/jquery.tablesorter.js | 371 +++++++++++++++++++---------------- test.html | 85 ++++++-- 5 files changed, 459 insertions(+), 227 deletions(-) create mode 100644 docs/example-update-all.html diff --git a/docs/example-add-rows.html b/docs/example-add-rows.html index 40fdc18f..25bf4686 100644 --- a/docs/example-add-rows.html +++ b/docs/example-add-rows.html @@ -134,7 +134,7 @@

- Next up: Update the table after cell content has changed ›› + Next up: Update an entire table column (thead and tbody) ››
diff --git a/docs/example-update-all.html b/docs/example-update-all.html new file mode 100644 index 00000000..ca2d9174 --- /dev/null +++ b/docs/example-update-all.html @@ -0,0 +1,114 @@ + + + + + jQuery plugin: Tablesorter 2.0 - Update headers & table body (updateAll) + + + + + + + + + + + + + + + + + + + + +
+ +

+ NOTE! +

+

+ +

Demo

+
+ + + + + + + + + + + + + + + + +
First NameLast NameValueTotalDiscountDate
PeterParkerx28$9.9920%Jul 6, 2006 8:14 AM
JohnHoody33$19.9925%Dec 10, 2002 5:14 AM
ClarkKenty18$15.8944%Jan 12, 2003 11:14 AM
BruceAlmightyx45$153.1944%Jan 18, 2001 9:12 AM
+ +Modify the entire value column +
+ +

Javascript

+
+

+	
+

HTML

+ + +
+ + + diff --git a/docs/index.html b/docs/index.html index 4d7d8ee9..95030514 100644 --- a/docs/index.html +++ b/docs/index.html @@ -278,13 +278,49 @@
  • Show a processing icon during sorting/filtering (v2.4)
  • -

    Parsers / Extracting Content

    +

    Using Parsers / Extracting Content

    + +

    Plugins / Custom Widgets / Custom Parsers

    + + + + +
    +

    Advanced

    + +

    Parsers / Extracting Content

    +
    -
    -

    Advanced

    Adding / Removing Content

    @@ -328,7 +351,7 @@
  • Modifying the Header using a template. New! v2.7
  • -
    +

    Other

    Options & Events

    @@ -399,7 +422,7 @@ cssAsc String "tablesorter-headerAsc" - The CSS style used to style the header when sorting ascending. Default value Changed! v2.5. + The CSS style used to style the header when sorting ascending. Default value (changed v2.5).
    Example from the blue theme:
    .tablesorter-blue .tablesorter-headerAsc {
    @@ -469,7 +492,7 @@
     				cssDesc
     				String
     				"tablesorter-headerDesc"
    -				The CSS style used to style the header when sorting descending. Default value Changed! v2.5.
    +				The CSS style used to style the header when sorting descending. Default value (changed v2.5).
     					
    Example from the blue theme:
    .tablesorter-blue .tablesorter-headerDesc {
    @@ -827,7 +850,7 @@ From the example function above, you'll end up with something similar to this HT
     						sorter: "isoDate"Sort by ISO date (YYYY-MM-DD or YYYY/MM/DD; these formats can be followed by a time).
     						sorter: "percent"Sort by percent.
     						sorter: "usLongDate"Sort by date (U.S. Standard, e.g. Jan 18, 2001 9:12 AM or 18 Jan 2001 9:12 AM (new in v2.7.4)).
    -						sorter: "shortDate"Sort by a shorten date (see dateFormat).
    +						sorter: "shortDate"Sort by a shortened date (see dateFormat; these formats can also be followed by a time).
     						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.
     					
    @@ -962,7 +985,7 @@ From the example function above, you'll end up with something similar to this HT String "asc" - The direction a column sorts when clicking the header for the first time. Valid arguments are "asc" for Ascending or "desc" for Descending.
    + This sets the direction a column will sort when clicking on the header for the first time. Valid arguments are "asc" for Ascending or "desc" for Descending.

    This order can also be set by desired column using the headers option (Added in v2.0.8).
    @@ -2156,7 +2179,7 @@ $("table").trigger("sorton", [sort, callback]);
    sortReset - Use this method to reset the table to it's initial unsorted state. New v2.4.7. + Use this method to reset the table to it's initial unsorted state (v2.4.7).
    Don't confuse this method with the sortReset option. This method immediately resets the entire table sort, while the option only resets the column sort after a third click.
    // Reset the table (make it unsorted)
    @@ -2167,7 +2190,7 @@ $("table").trigger("sortReset");
    update - Update the stored tablesorter data and the table. + Update the tbody's stored data (updateRow does exactly the same thing)
    // Add new content
     $("table tbody").append(html);
    @@ -2192,6 +2215,30 @@ $("table").trigger("sorton", [sorting]);
    Example + + updateAll + Update a column of cells (thead and tbody) New! v2.8. +
    +
    // 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(){
    +    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 ]);
    + + Example + + appendCache Update a table that has had its data dynamically changed; used in conjunction with "update".
    @@ -2290,14 +2337,15 @@ $('table').trigger('applyWidgets'); $("table").trigger("destroy"); // Remove tablesorter and all classes but the "tablesorter" class on the table -$("table").trigger("destroy", [false];
    +// callback is a function +$("table").trigger("destroy", [false, callback]);
    refreshWidgets - Refresh the currently applied widgets. Depending on the options, it will completely remove all widgets, then re-initialize the current widgets or just remove all non-current widgets. New v2.4. + Refresh the currently applied widgets. Depending on the options, it will completely remove all widgets, then re-initialize the current widgets or just remove all non-current widgets (v2.4).

    Trigger this method using either of the following methods (they are equivalent):
    // trigger a refresh widget event
    @@ -2324,7 +2372,7 @@ $.tablesorter.refreshWidgets(table, doAll, dontapply)
    search - Trigger the filter widget to update the search from current inputs and/or selections. Updated! v2.4. + Trigger the filter widget to update the search from current inputs and/or selections (v2.4).
    This first method sends an array with the search strings to the filter widget.
    $(function(){
       // apply "2?%" filter to the fifth column (zero-based index)
    @@ -2509,7 +2557,7 @@ or, directly add the search string to the filter input as follows:
    updateComplete
     				This event fires after tablesorter has completed updating. (v.2.3.9)
     					
    - This occurs after an "update", "updateCell" or "addRows" method was called, but before any callback functions are executed. + This occurs after an "update", "updateAll", "updateCell" or "addRows" method was called, but before any callback functions are executed.
    $(function(){
     
       // initialize the tablesorter plugin
    @@ -2588,7 +2636,7 @@ or, directly add the search string to the filter input as follows:
     				pagerBeforeInitialized
    -				This event fires after all pager controls have been bound and set up but before the pager formats the table or loads any ajax data.  New v2.4.4.
    +				This event fires after all pager controls have been bound and set up but before the pager formats the table or loads any ajax data (v2.4.4).
     					
    $(function(){
     
    @@ -2614,7 +2662,7 @@ or, directly add the search string to the filter input as follows:
     				pagerInitialized
    -				This event fires when the pager plugin has completed initialization.  New v2.4.4.
    +				This event fires when the pager plugin has completed initialization (v2.4.4).
     					
    $(function(){
     
    @@ -2641,7 +2689,7 @@ or, directly add the search string to the filter input as follows:
     				pageMoved
    -				This event fires when the pager plugin begins to change to the selected page. New v2.4.4.
    +				This event fires when the pager plugin begins to change to the selected page (v2.4.4).
     					
    This event may fire before the pagerComplete event when ajax processing is involved, or after the pagerComplete on normal use. See issue #153. @@ -2681,7 +2729,7 @@ or, directly add the search string to the filter input as follows:
     				filterInit
    -				Event triggered when the filter widget has finished initializing. New v2.4.
    +				Event triggered when the filter widget has finished initializing (v2.4).
     					
    You can use this event to modify the filter elements (row, inputs and/or selects) as desired. Use it as follows:
    $(function(){
       $('table').bind('filterInit', function(){
    @@ -2694,7 +2742,7 @@ or, directly add the search string to the filter input as follows:
     				filterStart
    -				Event triggered when the filter widget has started processing the search. New v2.4.
    +				Event triggered when the filter widget has started processing the search (v2.4).
     					
    You can use this event to do something like add a class to the filter row. Use it as follows:
    $(function(){
       $('table').bind('filterStart', function(){
    @@ -2707,7 +2755,7 @@ or, directly add the search string to the filter input as follows:
     				filterEnd
    -				Event triggered when the filter widget has finished processing the search. New v2.4.
    +				Event triggered when the filter widget has finished processing the search (v2.4).
     					
    You can use this event to do something like remove the class added to the filter row when the filtering started. Use it as follows:
    $(function(){
       $('table').bind('filterEnd', function(){
    @@ -2766,7 +2814,7 @@ or, directly add the search string to the filter input as follows: