2011-07-17 15:01:18 +00:00
<!DOCTYPE html>
< html >
2011-06-22 23:19:27 +00:00
< head >
2016-01-10 22:24:57 +00:00
< meta charset = "utf-8" >
< title > jQuery tablesorter 2.0 - Sort table using a link outside the table< / title >
2011-06-22 23:19:27 +00:00
<!-- jQuery -->
2014-05-21 22:09:23 +00:00
< 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" >
2013-01-26 15:21:13 +00:00
< 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 >
2014-05-13 15:45:32 +00:00
< 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" > $ ( f u n c t i o n ( ) {
2011-06-22 23:19:27 +00:00
2014-05-13 15:45:32 +00:00
$("table").tablesorter({
theme: 'blue',
2014-05-13 21:41:00 +00:00
widgets: ['zebra', 'columns']
2014-05-13 15:45:32 +00:00
});
// sort using data-sort attribute value
2018-03-17 20:30:25 +00:00
$('button[data-sort]').click(function() {
2014-05-13 15:45:32 +00:00
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
2018-03-17 20:30:25 +00:00
$('.sortReset-toggle').click(function() {
2014-05-13 15:45:32 +00:00
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");
2013-05-09 04:36:06 +00:00
return false;
});
2019-03-22 12:55:02 +00:00
// 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");
});
});
2011-06-22 23:19:27 +00:00
});< / script >
2014-05-13 15:45:32 +00:00
< script >
// demo stuff (update pre with current sort)
$(function() {
2018-03-17 20:30:25 +00:00
$('button[data-sort]').click(function() {
2014-05-13 15:45:32 +00:00
var $this = $(this),
2015-05-18 12:56:18 +00:00
$box = $this.closest('.box'),
2014-05-13 15:45:32 +00:00
sort = $this.data('sort'),
2015-05-18 12:56:18 +00:00
$pre = $box.find('pre:last'),
id = $box.attr('data-id');
2019-03-22 12:55:02 +00:00
if (sort === '') {
sort = '$("#table' + id + '").trigger("sortReset");';
$('#table' + id).trigger('sortReset');
} else {
sort = '$("#table' + id + '").trigger("sorton", [ ' + JSON.stringify(sort) + ' ]);';
}
$pre.html(sort);
2014-05-13 15:45:32 +00:00
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 15:45:32 +00:00
2014-05-13 16:53:18 +00:00
< p class = "tip" >
< em > NOTE!< / em >
2016-01-10 22:24:57 +00:00
< / p >
< ul >
2019-03-22 12:55:02 +00:00
< 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 >
2016-01-10 22:24:57 +00:00
< 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 >
2014-05-13 16:53:18 +00:00
2014-05-13 15:45:32 +00:00
< div id = "demo" >
<!--
********************
Basic Asc/Desc sort
********************
-->
< div class = "block" >
2015-05-18 12:56:18 +00:00
< div class = "left box" data-id = "1" >
2014-05-13 15:45:32 +00:00
2019-03-22 12:55:02 +00:00
< button type = "button" class = "sort-reset" data-sort = "" > Reset< / button >
2014-05-13 15:45:32 +00:00
< 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 >
2016-07-08 19:08:21 +00:00
< 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 > )
2019-03-22 12:55:02 +00:00
< pre class = "prettyprint lang-js updating" > $("#table1").trigger("sortReset");< / pre >
2014-05-21 22:09:23 +00:00
< small > * < code > "a"< / code > & < code > "d"< / code > values added < span class = "version" > v2.17.0< / span > .< / small >
2014-05-13 15:45:32 +00:00
< / 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" >
2015-05-18 12:56:18 +00:00
< div class = "left box" data-id = "2" >
2014-05-13 15:45:32 +00:00
2019-03-22 12:55:02 +00:00
< button type = "button" class = "sort-reset" data-sort = "" > Reset< / button >
2014-05-13 15:45:32 +00:00
< 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 >
2016-07-08 19:08:21 +00:00
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 >
2014-05-13 15:45:32 +00:00
< br >
2016-07-08 19:08:21 +00:00
Trigger "sort" event: < button type = "button" id = "toggle-sort" > Discount< / button > (v2.9)
2014-05-13 15:45:32 +00:00
< pre class = "prettyprint lang-js" > $("#table2").find("th:contains(Discount)").trigger("sort");< / pre >
2019-03-22 12:55:02 +00:00
< 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 >
2014-05-13 15:45:32 +00:00
2016-07-08 19:08:21 +00:00
< 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)
2019-03-22 12:55:02 +00:00
< pre class = "prettyprint lang-js updating" > $("#table2").trigger("sortReset");< / pre >
2014-05-21 22:09:23 +00:00
< small > * < code > "n"< / code > value added < span class = "version" > v2.17.0< / span > .< / small >
2014-05-13 15:45:32 +00:00
< / 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 >
2013-05-09 04:36:06 +00:00
< / div >
2014-05-13 15:45:32 +00:00
< br class = "clear" >
2013-05-09 04:36:06 +00:00
2014-05-13 15:45:32 +00:00
<!--
********************
Sort Same/Opposite
********************
-->
< div class = "block" >
2015-05-18 12:56:18 +00:00
< div class = "left box" data-id = "3" >
2019-03-22 12:55:02 +00:00
< button type = "button" class = "sort-reset" data-sort = "" > Reset< / button >
2014-05-13 15:45:32 +00:00
< 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 >
2016-07-08 19:08:21 +00:00
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 >
2014-05-13 15:45:32 +00:00
< br >
2016-07-08 19:08:21 +00:00
< 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 > )
2019-03-22 12:55:02 +00:00
< pre class = "prettyprint lang-js updating" > $("#table3").trigger("sortReset");< / pre >
2014-05-21 22:09:23 +00:00
< small > * < code > "s"< / code > & < code > "o"< / code > values added < span class = "version" > v2.17.0< / span > .< / small >
2011-06-22 23:19:27 +00:00
< / div >
2014-05-13 15:45:32 +00:00
< 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 >
2014-05-13 15:45:32 +00:00
< / div >
< br class = "clear" >
2011-07-17 15:01:18 +00:00
< / div >
2011-06-22 23:19:27 +00:00
< / div >
< / body >
< / html >
