From 547933815aac7e5ea9130fd018e54b3274234bb8 Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Fri, 22 Mar 2019 07:55:02 -0500
Subject: [PATCH] Docs: Update trigger sort page. See #1641

---
 docs/example-trigger-sort.html | 33 ++++++++++++++++++++++++++-------
 docs/index.html                |  2 +-
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/docs/example-trigger-sort.html b/docs/example-trigger-sort.html
index 249d63b3..4e9e5149 100644
--- a/docs/example-trigger-sort.html
+++ b/docs/example-trigger-sort.html
@@ -69,6 +69,12 @@
 		return false;
 	});
 
+	// toggle the sort on the Last Name column v2.23!
+	$('#toggle-direct').click(function(){
+		$.tablesorter.sortOn( $("#table2")[0].config, [ [1,"n"] ], function() {
+			console.log("done");
+		});
+	});
 });</script>
 
 	<script>
@@ -80,7 +86,13 @@
 				sort = $this.data('sort'),
 				$pre = $box.find('pre:last'),
 				id = $box.attr('data-id');
-			$pre.html('$("#table' + id + '").trigger("sorton", [ ' + JSON.stringify(sort) + ' ]);');
+			if (sort === '') {
+				sort = '$("#table' + id + '").trigger("sortReset");';
+				$('#table' + id).trigger('sortReset');
+			} else {
+				sort = '$("#table' + id + '").trigger("sorton", [ ' + JSON.stringify(sort) + ' ]);';
+			}
+			$pre.html(sort);
 			prettyPrint( null, $pre[0] );
 			return false;
 		});
@@ -102,6 +114,7 @@
 		<em>NOTE!</em>
 	</p>
 	<ul>
+		<li>In <span class="version">v2.23.0</span>, the direct sorton method was added with callback. See the "Toggle sort (Next)" block for an example.</li>		
 		<li>In <span class="version">v2.22.0</span>, a "click" event can be triggered on the header cell to toggle the sort.</li>
 		<li>In <span class="version">v2.17.0</span>, added sorton values (a)scending, (d)escending, (n)ext, (s)ame &amp; (o)pposite. Use the demo below help understand how to use these settings.</li>
 		<li>In v2.9, a "sort" event can be triggered on the header cell to toggle the sort.</li>
@@ -117,13 +130,13 @@ Basic Asc/Desc sort
 <div class="block">
 	<div class="left box" data-id="1">
 
-		<button type="button" class="sort-reset" data-sort="[]">Reset</button>
+		<button type="button" class="sort-reset" data-sort="">Reset</button>
 		<h3>Sort Ascending/Descending</h3>
 		Use <code>0</code> or <code>"a"</code> for ascending sorts, and <code>1</code> or <code>"d"</code> for descending sorts<super>*</super><br>
 		<br>
 		<button type="button" data-sort="[[0,0]]">Asc</button> (<code>[[0,0]]</code>) <button type="button" data-sort='[[0,"a"],[1,"d"]]'>Asc/Desc</button> (<code>[[0,"a"],[1,"d"]]</code>)<br>
 		<button type="button" data-sort="[[0,1]]">Desc</button> (<code>[[0,1]]</code>) <button type="button" data-sort='[[0,"d"],[1,"a"]]'>Desc/Asc</button> (<code>[[0,"d"],[1,"a"]]</code>)
-		<pre class="prettyprint lang-js updating">$("#table1").trigger("sorton", [ [] ]);</pre>
+		<pre class="prettyprint lang-js updating">$("#table1").trigger("sortReset");</pre>
 		<small>* <code>"a"</code> &amp; <code>"d"</code> values added <span class="version">v2.17.0</span>.</small>
 	</div>
 	<div class="right box">
@@ -151,7 +164,7 @@ Toggle Sort (Next)
 <div class="block">
 	<div class="left box" data-id="2">
 
-		<button type="button" class="sort-reset" data-sort="[]">Reset</button>
+		<button type="button" class="sort-reset" data-sort="">Reset</button>
 		<h3>Toggle sort (Next)</h3>
 		Either trigger a <code>"sort"</code> on the desired column, or <code>"sorton"</code> on the table using the <code>"n"</code> value<super>*</super>.<br>
 		Toggle the <button type="button" class="sortReset-toggle">sortReset</button> option (<code class="kwd">false</code>), then try these sorts (click a third time).<br>
@@ -159,10 +172,16 @@ Toggle Sort (Next)
 		<br>
 		Trigger "sort" event: <button type="button" id="toggle-sort">Discount</button> (v2.9)
 		<pre class="prettyprint lang-js">$("#table2").find("th:contains(Discount)").trigger("sort");</pre>
+		<br>
+		Trigger "sorton" event using the direct method: <button type="button" id="toggle-direct">Last Name</button> (v2.23)
+		<pre class="prettyprint lang-js">$.tablesorter.sortOn( $("#table2")[0].config, [ [1,"n"] ], function() {
+  console.log("done"); /* callback after sort */
+});</pre>
+		<br>
 
 		<button type="button" data-sort='[[0,"n"]]'>Asc/Desc</button> (<code>[[0,"n"]]</code>)<br>
 		<button type="button" data-sort='[[0,"n"],[1,"n"]]'>Asc/Desc</button> (<code>[[0,"n"],[1,"n"]]</code>; columns are independent)
-		<pre class="prettyprint lang-js updating">$("#table2").trigger("sorton", [ [] ]);</pre>
+		<pre class="prettyprint lang-js updating">$("#table2").trigger("sortReset");</pre>
 		<small>* <code>"n"</code> value added <span class="version">v2.17.0</span>.</small>
 	</div>
 	<div class="right box">
@@ -189,7 +208,7 @@ Sort Same/Opposite
 -->
 <div class="block">
 	<div class="left box" data-id="3">
-		<button type="button" class="sort-reset" data-sort="[]">Reset</button>
+		<button type="button" class="sort-reset" data-sort="">Reset</button>
 		<h3>Sort Same/Opposite</h3>
 		The same (<code>"s"</code>) or opposite (<code>"o"</code>) sort values always set the column sort based on the primary column<super>*</super>.<br>
 		Toggle the <button type="button" class="sortReset-toggle">sortReset</button> option (<code class="kwd">false</code>), then try these sorts (click a third time).<br>
@@ -202,7 +221,7 @@ Sort Same/Opposite
 		<button type="button" data-sort='[[0,"n"],[1,"o"],[2,"n"]]'>Next/opposite/next</button> (<code>[[0,"n"],[1,"o"],[2,"n"]]</code>)<br>
 		<button type="button" data-sort='[[0,"n"],[1,"o"],[2,"s"]]'>Next/opposite/same</button> (<code>[[0,"n"],[1,"o"],[2,"s"]]</code>)<br>
 		<button type="button" data-sort='[[0,"n"],[1,"o"],[2,"s"],[3,"o"]]'>Next/opposite/same/opposite</button> (<code>[[0,"n"],[1,"o"],[2,"s"],[3,"o"]]</code>)
-		<pre class="prettyprint lang-js updating">$("#table3").trigger("sorton", [ [] ]);</pre>
+		<pre class="prettyprint lang-js updating">$("#table3").trigger("sortReset");</pre>
 		<small>* <code>"s"</code> &amp; <code>"o"</code> values added <span class="version">v2.17.0</span>.</small>
 	</div>
 	<div class="right box">
diff --git a/docs/index.html b/docs/index.html
index 7f5ffe51..c9e103ec 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -5363,7 +5363,7 @@ var sorting = [ [2,1], [0,0] ];
 // After v2.19.0; do the following to apply a new sort after updating
 // if sorting is an empty array [], then the sort will be reset
 $( 'table' ).trigger( 'update', [ sorting ] );</pre>
-						<span class="label label-info">NOTE</span> Don't confuse this method with the <a href="#sortreset"><code>sortReset</code> option</a>. <code>updateRows</code> was added to work around the issue of using jQuery with the Prototype library. Triggering an "update" would make Prototype clear the tbody; Please see <a href="https://github.com/Mottie/tablesorter/issues/217">issue #217</a> for more details.
+						<span class="label label-info">NOTE</span> <code>updateRows</code> was added to work around the issue of using jQuery with the Prototype library. Triggering an "update" would make Prototype clear the tbody; Please see <a href="https://github.com/Mottie/tablesorter/issues/217">issue #217</a> for more details.
 					</div>
 				</td>
 				<td><a href="example-ajax.html">Example</a></td>