250 lines
9.7 KiB
HTML
250 lines
9.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>jQuery tablesorter 2.0 - Sort table using a link outside the table</title>
|
||
|
|
|
||
|
|
<!-- jQuery -->
|
||
|
|
<script src="js/jquery-latest.min.js"></script>
|
||
|
|
|
||
|
|
<!-- Demo stuff -->
|
||
|
|
<link rel="stylesheet" href="css/jq.css">
|
||
|
|
<link href="css/prettify.css" rel="stylesheet">
|
||
|
|
<script src="js/prettify.js"></script>
|
||
|
|
<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>
|
||
|
|
|
||
|
|
<!-- Tablesorter: required -->
|
||
|
|
<link rel="stylesheet" href="../css/theme.blue.css">
|
||
|
|
<script src="../js/jquery.tablesorter.js"></script>
|
||
|
|
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||
|
|
|
||
|
|
<script id="js">$(function() {
|
||
|
|
|
||
|
|
$("table").tablesorter({
|
||
|
|
theme: 'blue',
|
||
|
|
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 ]);
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
|
||
|
|
$('.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;
|
||
|
|
});
|
||
|
|
|
||
|
|
// 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>
|
||
|
|
// demo stuff (update pre with current sort)
|
||
|
|
$(function() {
|
||
|
|
$('button[data-sort]').click(function() {
|
||
|
|
var $this = $(this),
|
||
|
|
$box = $this.closest('.box'),
|
||
|
|
sort = $this.data('sort'),
|
||
|
|
$pre = $box.find('pre:last'),
|
||
|
|
id = $box.attr('data-id');
|
||
|
|
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;
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</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>
|
||
|
|
|
||
|
|
<p class="tip">
|
||
|
|
<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 & (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>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<div id="demo">
|
||
|
|
|
||
|
|
<!--
|
||
|
|
********************
|
||
|
|
Basic Asc/Desc sort
|
||
|
|
********************
|
||
|
|
-->
|
||
|
|
<div class="block">
|
||
|
|
<div class="left box" data-id="1">
|
||
|
|
|
||
|
|
<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("sortReset");</pre>
|
||
|
|
<small>* <code>"a"</code> & <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" data-id="2">
|
||
|
|
|
||
|
|
<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>
|
||
|
|
|
||
|
|
<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("sortReset");</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" data-id="3">
|
||
|
|
<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>
|
||
|
|
<br>
|
||
|
|
<button type="button" data-sort='[[0,"s"]]'>Same</button> (<code>[[0,"s"]]</code>; always defaults to Asc sort if set on primary column)<br>
|
||
|
|
<button type="button" data-sort='[[0,0],[1,"s"]]'>Asc/same</button> (<code>[[0,0],[1,"s"]]</code>)<br>
|
||
|
|
<button type="button" data-sort='[[0,1],[1,"s"]]'>Desc/same</button> (<code>[[0,1],[1,"s"]]</code>)<br>
|
||
|
|
<button type="button" data-sort='[[0,"n"],[1,"s"]]'>Next/same</button> (<code>[[0,"n"],[1,"s"]]</code>)<br>
|
||
|
|
<button type="button" data-sort='[[0,"n"],[1,"o"]]'>Next/opposite</button> (<code>[[0,"n"],[1,"o"]]</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"],[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("sortReset");</pre>
|
||
|
|
<small>* <code>"s"</code> & <code>"o"</code> values added <span class="version">v2.17.0</span>.</small>
|
||
|
|
</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>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<br class="clear">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|