tablesorter/docs/example-trigger-sort.html

228 lines
8.5 KiB
HTML
Raw Normal View History

2011-07-17 15:01:18 +00:00
<!DOCTYPE html>
<html>
2011-06-22 23:19:27 +00:00
<head>
2011-07-17 15:01:18 +00:00
<meta charset="utf-8">
2011-06-22 23:19:27 +00:00
<title>jQuery plugin: Tablesorter 2.0 - Sort table using a link outside the table</title>
<!-- jQuery -->
<script src="js/jquery-latest.min.js"></script>
2011-06-22 23:19:27 +00:00
<!-- Demo stuff -->
2011-07-17 15:01:18 +00:00
<link rel="stylesheet" href="css/jq.css">
<link href="css/prettify.css" rel="stylesheet">
<script src="js/prettify.js"></script>
2011-07-17 15:01:18 +00:00
<script src="js/docs.js"></script>
<style>
.block, .left, .right {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 5px 10px;
}
.left {
background: #eee;
width: 50%;
float: left;
margin-top: 15px;
padding: 10px;
}
.right {
width: 50%;
float: right;
}
.block h3 {
margin: 2px;
}
.sort-reset {
float: right;
}
</style>
2011-06-22 23:19:27 +00:00
<!-- Tablesorter: required -->
2012-09-27 19:57:19 +00:00
<link rel="stylesheet" href="../css/theme.blue.css">
2011-07-17 15:01:18 +00:00
<script src="../js/jquery.tablesorter.js"></script>
2014-05-13 21:41:00 +00:00
<script src="../js/jquery.tablesorter.widgets.js"></script>
2011-07-17 15:01:18 +00:00
<script id="js">$(function() {
2011-06-22 23:19:27 +00:00
$("table").tablesorter({
theme: 'blue',
2014-05-13 21:41:00 +00:00
widgets: ['zebra', 'columns']
});
// sort using data-sort attribute value
$('button[data-sort]').click(function(){
var sort = $(this).data('sort');
$(this).closest('.block').find('table').trigger('sorton', [ sort ]);
2011-06-22 23:19:27 +00:00
return false;
});
2011-07-17 15:01:18 +00:00
$('.sortReset-toggle').click(function(){
var c = $(this).closest('.block').find('table')[0].config;
c.sortReset = !c.sortReset;
$(this).next().html('' + c.sortReset);
});
// toggle the sort on the Discount column v2.9!
$("#toggle-sort").click(function() {
$("#table2").find("th:contains(Discount)").trigger("sort");
return false;
});
2011-06-22 23:19:27 +00:00
});</script>
<script>
// demo stuff (update pre with current sort)
$(function() {
$('button[data-sort]').click(function(){
var $this = $(this),
sort = $this.data('sort'),
$pre = $this.closest('.box').find('pre:last');
$pre.html('$("table").trigger("sorton", [ ' + JSON.stringify(sort) + ' ]);');
prettyPrint( null, $pre[0] );
return false;
});
});
</script>
2011-06-22 23:19:27 +00:00
</head>
<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>Sort table using a link outside the table</h2>
<h3>Flexible client-side table sorting</h3>
<a href="index.html">Back to documentation</a>
</div>
<div id="main">
<h1>Demo</h1>
2014-05-13 16:53:18 +00:00
<p class="tip">
<em>NOTE!</em>
<ul>
<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>
2014-05-13 16:53:18 +00:00
<li>In v2.9, a "sort" event can be triggered on the header cell to toggle the sort.</li>
</ul>
<p>
2014-05-13 16:53:18 +00:00
<div id="demo">
<!--
********************
Basic Asc/Desc sort
********************
-->
<div class="block">
<div class="left box">
<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 data-sort="[[0,0]]">Asc</button> (<code>[[0,0]]</code>) <button data-sort='[[0,"a"],[1,"d"]]'>Asc/Desc</button> (<code>[[0,"a"],[1,"d"]]</code>)<br>
<button data-sort="[[0,1]]">Desc</button> (<code>[[0,1]]</code>) <button data-sort='[[0,"d"],[1,"a"]]'>Desc/Asc</button> (<code>[[0,"d"],[1,"a"]]</code>)
<pre class="prettyprint lang-js updating">$("table").trigger("sorton", [ [] ]);</pre>
<small>* <code>"a"</code> &amp; <code>"d"</code> values added <span class="version">v2.17.0</span>.</small>
</div>
<div class="right box">
<table id="table1" class="tablesorter">
<thead>
<tr><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Date</th></tr>
</thead>
<tbody>
<tr><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2006 8:14 AM</td></tr>
<tr><td>John</td><td>Hood</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
<tr><td>Clark</td><td>Kent</td><td>18</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
<tr><td>Bruce</td><td>Almighty</td><td>45</td><td>$153.19</td><td>44%</td><td>Jan 18, 2001 9:12 AM</td></tr>
<tr><td>Bruce</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jan 18, 2007 9:12 AM</td></tr>
</tbody>
</table>
</div>
</div>
<br class="clear">
<!--
********************
Toggle Sort (Next)
********************
-->
<div class="block">
<div class="left box">
<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 class="sortReset-toggle">sortReset</button> option (<code class="kwd">false</code>), then try these sorts (click a third time).<br>
<br>
Trigger "sort" event: <button id="toggle-sort">Discount</button> (v2.9)
<pre class="prettyprint lang-js">$("#table2").find("th:contains(Discount)").trigger("sort");</pre>
<button data-sort='[[0,"n"]]'>Asc/Desc</button> (<code>[[0,"n"]]</code>)<br>
<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">$("table").trigger("sorton", [ [] ]);</pre>
<small>* <code>"n"</code> value added <span class="version">v2.17.0</span>.</small>
</div>
<div class="right box">
<table id="table2" class="tablesorter">
<thead>
<tr><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Date</th></tr>
</thead>
<tbody>
<tr><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2006 8:14 AM</td></tr>
<tr><td>John</td><td>Hood</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
<tr><td>Clark</td><td>Kent</td><td>18</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
<tr><td>Bruce</td><td>Almighty</td><td>45</td><td>$153.19</td><td>44%</td><td>Jan 18, 2001 9:12 AM</td></tr>
<tr><td>Bruce</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jan 18, 2007 9:12 AM</td></tr>
</tbody>
</table>
</div>
</div>
<br class="clear">
<!--
********************
Sort Same/Opposite
********************
-->
<div class="block">
<div class="left box">
<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 class="sortReset-toggle">sortReset</button> option (<code class="kwd">false</code>), then try these sorts (click a third time).<br>
<br>
<button data-sort='[[0,"s"]]'>Same</button> (<code>[[0,"s"]]</code>; always defaults to Asc sort if set on primary column)<br>
<button data-sort='[[0,0],[1,"s"]]'>Asc/same</button> (<code>[[0,0],[1,"s"]]</code>)<br>
<button data-sort='[[0,1],[1,"s"]]'>Desc/same</button> (<code>[[0,1],[1,"s"]]</code>)<br>
<button data-sort='[[0,"n"],[1,"s"]]'>Next/same</button> (<code>[[0,"n"],[1,"s"]]</code>)<br>
<button data-sort='[[0,"n"],[1,"o"]]'>Next/opposite</button> (<code>[[0,"n"],[1,"o"]]</code>)<br>
<button data-sort='[[0,"n"],[1,"o"],[2,"n"]]'>Next/opposite/next</button> (<code>[[0,"n"],[1,"o"],[2,"n"]]</code>)<br>
<button data-sort='[[0,"n"],[1,"o"],[2,"s"]]'>Next/opposite/same</button> (<code>[[0,"n"],[1,"o"],[2,"s"]]</code>)<br>
<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">$("table").trigger("sorton", [ [] ]);</pre>
<small>* <code>"s"</code> &amp; <code>"o"</code> values added <span class="version">v2.17.0</span>.</small>
2011-06-22 23:19:27 +00:00
</div>
<div class="right box">
<table id="table3" class="tablesorter">
<thead>
<tr><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Date</th></tr>
</thead>
<tbody>
<tr><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2006 8:14 AM</td></tr>
<tr><td>John</td><td>Hood</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
<tr><td>Clark</td><td>Kent</td><td>18</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
<tr><td>Bruce</td><td>Almighty</td><td>45</td><td>$153.19</td><td>44%</td><td>Jan 18, 2001 9:12 AM</td></tr>
<tr><td>Bruce</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jan 18, 2007 9:12 AM</td></tr>
</tbody>
</table>
2011-06-22 23:19:27 +00:00
</div>
</div>
<br class="clear">
2011-07-17 15:01:18 +00:00
</div>
2011-06-22 23:19:27 +00:00
</div>
</body>
</html>