mirror of
https://github.com/Mottie/tablesorter.git
synced 2024-11-15 23:54:22 +00:00
Core: new sorton values "a", "d", "n", "s" & "o"
This commit is contained in:
Mottie
parent
59f0de489a
commit
bf94978dd2
@ -93,7 +93,6 @@ table th a { text-decoration: underline; color: #000; }
|
||||
#group .ui-slider,#align .ui-slider { width: 100px; height: 3px; font-size: 0.8em; display: inline-block; margin-left: 10px; }
|
||||
#group .demo-label,#align .demo-label { display: inline-block; min-width: 120px; }
|
||||
#align .demo-label { display: inline-block; min-width: 150px; }
|
||||
@media all and (max-width: 650px) {
|
||||
table.compatibility { float: none; }
|
||||
.box { width: 100%; }
|
||||
@media all and (max-width: 700px) {
|
||||
table.compatibility, div.box { float: none; width: 100%; margin: 0; }
|
||||
}
|
||||
|
||||
@ -12,39 +12,78 @@
|
||||
<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="../addons/pager/jquery.tablesorter.pager.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
$("table").tablesorter({ theme: 'blue' });
|
||||
$("table").tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ['zebra']
|
||||
});
|
||||
|
||||
// ****************************************
|
||||
// sort the "First Name" and "Age" columns
|
||||
// ****************************************
|
||||
$("#trigger-link").click(function() {
|
||||
// set sorting column and direction, this will sort on the
|
||||
// first and third column the column index starts at zero
|
||||
var sorting = [[0,0],[2,0]];
|
||||
// sort on the first column and third columns
|
||||
$("table").trigger("sorton",[sorting]);
|
||||
// return false to stop default link action
|
||||
// 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;
|
||||
});
|
||||
|
||||
// ****************************************
|
||||
// toggle the sort on the 5th column
|
||||
// (Discount) - New in v2.9!
|
||||
// ****************************************
|
||||
$("#toggle-link").click(function() {
|
||||
$("table thead").find("th:eq(4)").trigger("sort");
|
||||
$('.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;
|
||||
});
|
||||
|
||||
});</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>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
@ -55,77 +94,122 @@
|
||||
</div>
|
||||
<div id="main">
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
||||
<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> & <code>"d"</code> values added <span class="version">v2.18.5</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>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<a href="#" id="trigger-link">Sort first and third columns</a> |
|
||||
<a href="#" id="toggle-link">Toggle sort on the "Discount" column</a> (v2.9)
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</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.18.5</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> & <code>"o"</code> values added <span class="version">v2.18.5</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 class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-option-sort-force.html">Force a default sorting order ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -360,7 +360,7 @@
|
||||
<li><a href="example-option-sort-key.html">Change the default multi-sorting key</a> (<a href="#sortmultisortkey"><code>sortMultiSortKey</code></a>)</li>
|
||||
<li><a href="example-option-custom-sort.html">Custom sort script</a> (<a href="#textsorter"><code>textSorter</code></a>; added v2.2; updated <span class="version updated">v2.12</span>)</li>
|
||||
<li><a href="example-locale-sort.html">Sorting Accented Characters</a> (<a href="#sortlocalecompare"><code>sortLocaleCompare</code></a>; v2.24; <a href="https://github.com/Mottie/tablesorter/wiki/Language">languages</a>)</li>
|
||||
<li><a href="example-trigger-sort.html">Sort table using a link outside the table</a> (external link)</li>
|
||||
<li><a href="example-trigger-sort.html">Sort table using a link outside the table</a> (external link; <span class="updated version">v2.16.5</span>)</li>
|
||||
<li><a href="example-child-rows.html">Attach child rows (rows that sort with their parent row)</a> (<span class="updated version">v2.15.12</span>)</li>
|
||||
<li><a href="example-child-rows-filtered.html">Use child rows + filter widget</a> (<span class="updated version">v2.15.12</span>)</li>
|
||||
<li><a href="example-multiple-tbodies.html">Sorting with Multiple Tbodies</a> (v2.2)</li>
|
||||
|
||||
@ -546,19 +546,46 @@
|
||||
}
|
||||
}
|
||||
|
||||
function updateHeaderSortCount(table, list, triggered) {
|
||||
var s, t, o, c = table.config,
|
||||
function updateHeaderSortCount(table, list) {
|
||||
var s, t, o, col, primary,
|
||||
c = table.config,
|
||||
sl = list || c.sortList;
|
||||
c.sortList = [];
|
||||
$.each(sl, function(i,v){
|
||||
// ensure all sortList values are numeric - fixes #127
|
||||
s = [ parseInt(v[0], 10), parseInt(v[1], 10) ];
|
||||
col = parseInt(v[0], 10);
|
||||
// make sure header exists
|
||||
o = c.$headers.filter('[data-column="' + s[0] + '"]:last')[0];
|
||||
o = c.$headers.filter('[data-column="' + col + '"]:last')[0];
|
||||
if (o) { // prevents error if sorton array is wrong
|
||||
// o.count = o.count + 1;
|
||||
t = ('' + v[1]).match(/^(1|d|s|o|n)/);
|
||||
t = t ? t[0] : '';
|
||||
// 0/(a)sc (default), 1/(d)esc, (s)ame, (o)pposite, (n)ext
|
||||
switch(t) {
|
||||
case '1': case 'd': // descending
|
||||
t = 1;
|
||||
break;
|
||||
case 's': // same direction (as primary column)
|
||||
// if primary sort is set to "s", make it ascending
|
||||
t = primary || 0;
|
||||
break;
|
||||
case 'o':
|
||||
s = o.order[(primary || 0) % (c.sortReset ? 3 : 2)];
|
||||
// opposite of primary column; but resets if primary resets
|
||||
t = s === 0 ? 1 : s === 1 ? 0 : 2;
|
||||
break;
|
||||
case 'n':
|
||||
o.count = o.count + 1;
|
||||
t = o.order[(o.count) % (c.sortReset ? 3 : 2)];
|
||||
break;
|
||||
default: // ascending
|
||||
t = 0;
|
||||
break;
|
||||
}
|
||||
primary = i === 0 ? t : primary;
|
||||
s = [ col, parseInt(t, 10) || 0 ];
|
||||
c.sortList.push(s);
|
||||
t = $.inArray(s[1], o.order); // fixes issue #167
|
||||
if (triggered) { o.count = o.count + 1; }
|
||||
o.count = t >= 0 ? t : s[1] % (c.sortReset ? 3 : 2);
|
||||
}
|
||||
});
|
||||
@ -872,7 +899,7 @@
|
||||
e.stopPropagation();
|
||||
$table.trigger("sortStart", this);
|
||||
// update header count index
|
||||
updateHeaderSortCount(table, list, true);
|
||||
updateHeaderSortCount(table, list);
|
||||
// set css for headers
|
||||
setHeadersCss(table);
|
||||
// fixes #346
|
||||
|
||||
@ -466,6 +466,28 @@ $(function(){
|
||||
|
||||
});
|
||||
|
||||
test( "sorton methods", function(){
|
||||
expect(6);
|
||||
|
||||
$table3.trigger('sorton', [[[ 0,'d' ]]]);
|
||||
equal( c3.sortList + '', '0,1', 'sorton desc [0,"d"]' );
|
||||
|
||||
$table3.trigger('sorton', [[[ 0,'a' ]]]);
|
||||
equal( c3.sortList + '', '0,0', 'sorton asc [0,"a"]' );
|
||||
|
||||
$table3.trigger('sorton', [[[ 0,'n' ]]]);
|
||||
equal( c3.sortList + '', '0,1', 'sorton next [0,"n"]' );
|
||||
$table3.trigger('sorton', [[[ 0,'n' ]]]);
|
||||
equal( c3.sortList + '', '0,0', 'sorton next [0,"n"]' );
|
||||
|
||||
$table3.trigger('sorton', [[ [ 0,'n'], [1,'o'], [2,'s'] ]]);
|
||||
equal( c3.sortList + '', '0,1,1,0,2,1', 'sorton next/opposite/same [0,"n"],[1,"o"],[2,"s"]' );
|
||||
|
||||
$table3.trigger('sorton', [[ [ 0,'n'], [1,'o'], [2,'s'] ]]);
|
||||
equal( c3.sortList + '', '0,0,1,1,2,0', 'sorton next/opposite/same [0,"n"],[1,"o"],[2,"s"]' );
|
||||
|
||||
});
|
||||
|
||||
test( "sort Events", function(){
|
||||
expect(1);
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user