library-mirrors/tablesorter
1
0
Fork 0
mirror of https://github.com/Mottie/tablesorter.git synced 2024-12-05 05:04:20 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Docs: Update trigger sort page. See #1641

Browse Source
This commit is contained in:
Rob Garrison 2019-03-22 07:55:02 -05:00
parent aa965f6230
commit 547933815a
2 changed files with 27 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
docs/example-trigger-sort.html
View File

@ -69,6 +69,12 @@
return false; 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>
<script> <script>
@ -80,7 +86,13 @@
sort = $this.data('sort'), sort = $this.data('sort'),
$pre = $box.find('pre:last'), $pre = $box.find('pre:last'),
id = $box.attr('data-id'); 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] ); prettyPrint( null, $pre[0] );
return false; return false;
}); });
@ -102,6 +114,7 @@
<em>NOTE!</em> <em>NOTE!</em>
</p> </p>
<ul> <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.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 <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> <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="block">
<div class="left box" data-id="1"> <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> <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> 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> <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,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>) <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> <small>* <code>"a"</code> &amp; <code>"d"</code> values added <span class="version">v2.17.0</span>.</small>
</div> </div>
<div class="right box"> <div class="right box">
@ -151,7 +164,7 @@ Toggle Sort (Next)
<div class="block"> <div class="block">
<div class="left box" data-id="2"> <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> <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> 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> 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> <br>
Trigger "sort" event: <button type="button" id="toggle-sort">Discount</button> (v2.9) 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> <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"]]'>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) <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> <small>* <code>"n"</code> value added <span class="version">v2.17.0</span>.</small>
</div> </div>
<div class="right box"> <div class="right box">
@ -189,7 +208,7 @@ Sort Same/Opposite
--> -->
<div class="block"> <div class="block">
<div class="left box" data-id="3"> <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> <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> 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> 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,"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"]]'>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>) <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> <small>* <code>"s"</code> &amp; <code>"o"</code> values added <span class="version">v2.17.0</span>.</small>
</div> </div>
<div class="right box"> <div class="right box">

2
docs/index.html
View File

@ -5363,7 +5363,7 @@ var sorting = [ [2,1], [0,0] ];
// After v2.19.0; do the following to apply a new sort after updating // 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 // if sorting is an empty array [], then the sort will be reset
$( 'table' ).trigger( 'update', [ sorting ] );</pre> $( '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> </div>
</td> </td>
<td><a href="example-ajax.html">Example</a></td> <td><a href="example-ajax.html">Example</a></td>