library-mirrors/tablesorter
1
0
Fork 0
mirror of https://github.com/Mottie/tablesorter.git synced 2024-11-15 23:54:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Core: new sorton values "a", "d", "n", "s" & "o"

Browse Source
This commit is contained in:
Mottie 2014-05-13 10:45:32 -05:00
parent 59f0de489a
commit bf94978dd2
5 changed files with 227 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
docs/css/jq.css
View File

@ -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 .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; } #group .demo-label,#align .demo-label { display: inline-block; min-width: 120px; }
#align .demo-label { display: inline-block; min-width: 150px; } #align .demo-label { display: inline-block; min-width: 150px; }
@media all and (max-width: 650px) { @media all and (max-width: 700px) {
table.compatibility { float: none; } table.compatibility, div.box { float: none; width: 100%; margin: 0; }
.box { width: 100%; }
} }

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

@ -12,39 +12,78 @@
<link href="css/prettify.css" rel="stylesheet"> <link href="css/prettify.css" rel="stylesheet">
<script src="js/prettify.js"></script> <script src="js/prettify.js"></script>
<script src="js/docs.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 --> <!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/theme.blue.css"> <link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script> <script src="../js/jquery.tablesorter.js"></script>
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
<script id="js">$(function() { <script id="js">$(function() {
$("table").tablesorter({ theme: 'blue' }); $("table").tablesorter({
theme: 'blue',
widgets: ['zebra']
});
// **************************************** // sort using data-sort attribute value
// sort the "First Name" and "Age" columns $('button[data-sort]').click(function(){
// **************************************** var sort = $(this).data('sort');
$("#trigger-link").click(function() { $(this).closest('.block').find('table').trigger('sorton', [ sort ]);
// 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
return false; return false;
}); });
// **************************************** $('.sortReset-toggle').click(function(){
// toggle the sort on the 5th column var c = $(this).closest('.block').find('table')[0].config;
// (Discount) - New in v2.9! c.sortReset = !c.sortReset;
// **************************************** $(this).next().html('' + c.sortReset);
$("#toggle-link").click(function() { });
$("table thead").find("th:eq(4)").trigger("sort");
// toggle the sort on the Discount column v2.9!
$("#toggle-sort").click(function() {
$("#table2").find("th:contains(Discount)").trigger("sort");
return false; return false;
}); });
});</script> });</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> </head>
<body> <body>
<div id="banner"> <div id="banner">
@ -55,77 +94,122 @@
</div> </div>
<div id="main"> <div id="main">
<h1>Demo</h1> <h1>Demo</h1>
<div id="demo"><table 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>
<a href="#" id="trigger-link">Sort first and third columns</a> | <div id="demo">
<a href="#" id="toggle-link">Toggle sort on the "Discount" column</a> (v2.9)
<!--
********************
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.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>
</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> </div>
<br class="clear">
<h1>Javascript</h1> <!--
<div id="javascript"> ********************
<pre class="prettyprint lang-javascript"></pre> Toggle Sort (Next)
</div> ********************
<h1>HTML</h1> -->
<div id="html"> <div class="block">
<pre class="prettyprint lang-html"></pre> <div class="left box">
</div>
<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> &amp; <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 &rsaquo;&rsaquo;</a>
</div> </div>
</div> </div>

2
docs/index.html
View File

@ -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-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-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-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.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-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> <li><a href="example-multiple-tbodies.html">Sorting with Multiple Tbodies</a> (v2.2)</li>

39
js/jquery.tablesorter.js
View File

@ -546,19 +546,46 @@
} }
} }
function updateHeaderSortCount(table, list, triggered) { function updateHeaderSortCount(table, list) {
var s, t, o, c = table.config, var s, t, o, col, primary,
c = table.config,
sl = list || c.sortList; sl = list || c.sortList;
c.sortList = []; c.sortList = [];
$.each(sl, function(i,v){ $.each(sl, function(i,v){
// ensure all sortList values are numeric - fixes #127 // 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 // 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 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); c.sortList.push(s);
t = $.inArray(s[1], o.order); // fixes issue #167 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); o.count = t >= 0 ? t : s[1] % (c.sortReset ? 3 : 2);
} }
}); });
@ -872,7 +899,7 @@
e.stopPropagation(); e.stopPropagation();
$table.trigger("sortStart", this); $table.trigger("sortStart", this);
// update header count index // update header count index
updateHeaderSortCount(table, list, true); updateHeaderSortCount(table, list);
// set css for headers // set css for headers
setHeadersCss(table); setHeadersCss(table);
// fixes #346 // fixes #346

22
testing/testing.js
View File

@ -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(){ test( "sort Events", function(){
expect(1); expect(1);