library-mirrors/tablesorter
1
0
Fork 0
mirror of https://github.com/Mottie/tablesorter.git synced 2024-10-08 13:44:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

lockedOrder & sortInitialOrder headers options

Browse Source
This commit is contained in:
Rob Garrison 2011-07-21 23:40:00 -05:00
parent 98eee6dc72
commit 3e1ec68cc0
9 changed files with 309 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
README.markdown
View File

@ -28,6 +28,13 @@ Included all original [document pages](http://mottie.github.com/tablesorter/docs
View the [complete listing here](changelog.markdown). View the [complete listing here](changelog.markdown).
#### Version 2.0.8 (2011-07-21)
* Fixed parsers for currency and digits to work with number values separated by commas. Thanks to Josh Renaud for the information!
* Fixed "lockedOrder" header option and added documentation and an example on how to use it.
* Made the sort order "desc" only trigger off of the first letter, so any word/abbreviation starting with "d" will set the descending sort order, all other letters will set the order to ascending (shhh, because I'm a bad speller :P)
* Modified the "sortInitialOrder" option so it can also be set in the headers option.
#### Version 2.0.7 (2011-07-17) #### Version 2.0.7 (2011-07-17)
* Added "pagerChange" and "pagerComplete" events to the pager plugin which trigger on the table. See the [pager demo](http://mottie.github.com/tablesorter/docs/example-pager.html) for an example on how to bind to them. * Added "pagerChange" and "pagerComplete" events to the pager plugin which trigger on the table. See the [pager demo](http://mottie.github.com/tablesorter/docs/example-pager.html) for an example on how to bind to them.

7
changelog.markdown
View File

@ -1,5 +1,12 @@
###TableSorter Change Log ###TableSorter Change Log
#### Version 2.0.8 (2011-07-21)
* Fixed parsers for currency and digits to work with number values separated by commas. Thanks to Josh Renaud for the information!
* Fixed "lockedOrder" header option and added documentation and an example on how to use it.
* Made the sort order "desc" only trigger off of the first letter, so any word/abbreviation starting with "d" will set the descending sort order, all other letters will set the order to ascending (shhh, because I'm a bad speller :P)
* Modified the "sortInitialOrder" option so it can also be set in the headers option.
#### Version 2.0.7 (2011-07-17) #### Version 2.0.7 (2011-07-17)
* Added "pagerChange" and "pagerComplete" events to the pager plugin which trigger on the table. See the [pager demo](http://mottie.github.com/tablesorter/docs/example-pager.html) for an example on how to bind to them. * Added "pagerChange" and "pagerComplete" events to the pager plugin which trigger on the table. See the [pager demo](http://mottie.github.com/tablesorter/docs/example-pager.html) for an example on how to bind to them.

124
docs/example-options-headers-locked.html Normal file
View File

@ -0,0 +1,124 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Lock sort order using header options</title>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<!-- Demo stuff -->
<link rel="stylesheet" href="css/jq.css">
<script src="js/chili/jquery.chili-2.2.js"></script>
<script src="js/chili/recipes.js"></script>
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<script src="../js/jquery.tablesorter.js"></script>
<script id="js">$(function(){
$("table").tablesorter({
// pass the headers argument and passing a object
headers: {
0: {
// lock the sort order of the first column to ascending (always Bruce to Peter when sorting on that column)
lockedOrder: 'asc'
},
2: {
// lock the sort order of the third column to descending (always 45 to 18 when sorting on that column)
lockedOrder: 'desc'
}
}
});
});</script>
</head>
<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>Lock sort order using header options</h2>
<h3>Flexible client-side table sorting</h3>
<a href="index.html">Back to documentation</a>
</div>
<div id="main">
<p class="tip">
<em>TIP!</em> Sort the first and third columns to see how the sort is locked. Override this by using the multisort key (shift) while clicking on the header.
</p>
<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></div>
<h1>Javascript</h1>
<div id="javascript">
<pre class="js"></pre>
</div>
<h1>HTML</h1>
<div id="html">
<pre class="html"></pre>
</div>
<div class="next-up">
<hr />
Next up: <a href="example-options-headers-order.html">Basic: Set initial sort order using header options &rsaquo;&rsaquo;</a>
</div>
</div>
</body>
</html>

119
docs/example-options-headers-order.html Normal file
View File

@ -0,0 +1,119 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Set initial sort order using header options</title>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<!-- Demo stuff -->
<link rel="stylesheet" href="css/jq.css">
<script src="js/chili/jquery.chili-2.2.js"></script>
<script src="js/chili/recipes.js"></script>
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<script src="../js/jquery.tablesorter.js"></script>
<script id="js">$(function(){
$("table").tablesorter({
// default sortInitialOrder setting
sortInitialOrder: "asc",
// pass the headers argument and passing a object
headers: {
// set initial sort order by column, this headers option setting overrides the sortInitialOrder option
0: { sortInitialOrder: 'desc' },
2: { sortInitialOrder: 'desc' },
4: { sortInitialOrder: 'desc' }
}
});
});</script>
</head>
<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>Set initial sort order using header options</h2>
<h3>Flexible client-side table sorting</h3>
<a href="index.html">Back to documentation</a>
</div>
<div id="main">
<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></div>
<h1>Javascript</h1>
<div id="javascript">
<pre class="js"></pre>
</div>
<h1>HTML</h1>
<div id="html">
<pre class="html"></pre>
</div>
<div class="next-up">
<hr />
Next up: <a href="example-option-sort-key.html">Basic: Change the default multi-sorting key &rsaquo;&rsaquo;</a>
</div>
</div>
</body>
</html>

8
docs/example-options-headers.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Disable headers using options</title> <title>jQuery plugin: Tablesorter 2.0 - Disable sort using headers options</title>
<!-- jQuery --> <!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
@ -19,7 +19,7 @@
<script id="js">$(function(){ <script id="js">$(function(){
$("table").tablesorter({ $("table").tablesorter({
// pass the headers argument and assing a object // pass the headers argument and passing a object
headers: { headers: {
// assign the secound column (we start counting zero) // assign the secound column (we start counting zero)
1: { 1: {
@ -38,7 +38,7 @@
<body> <body>
<div id="banner"> <div id="banner">
<h1>table<em>sorter</em></h1> <h1>table<em>sorter</em></h1>
<h2>Disable headers using options</h2> <h2>Disable sort using headers options</h2>
<h3>Flexible client-side table sorting</h3> <h3>Flexible client-side table sorting</h3>
<a href="index.html">Back to documentation</a> <a href="index.html">Back to documentation</a>
</div> </div>
@ -110,7 +110,7 @@
<div class="next-up"> <div class="next-up">
<hr /> <hr />
Next up: <a href="example-option-sort-key.html">Basic: Change the default multi-sorting key &rsaquo;&rsaquo;</a> Next up: <a href="example-options-headers-locked.html">Basic: Lock sort order using header options &rsaquo;&rsaquo;</a>
</div> </div>
</div> </div>

30
docs/index.html
View File

@ -36,7 +36,7 @@
</div> </div>
<p> <p>
<strong>Author:</strong> <a class="external" href="http://lovepeacenukes.com">Christian Bach</a><br> <strong>Author:</strong> <a class="external" href="http://lovepeacenukes.com">Christian Bach</a><br>
<strong>Version:</strong> 2.0.7 (<a href="../changelog.markdown">changelog</a>)<br> <strong>Version:</strong> 2.0.8 (<a href="../changelog.markdown">changelog</a>)<br>
<strong>Licence:</strong> <strong>Licence:</strong>
Dual licensed under <a class="external" href="http://www.opensource.org/licenses/mit-license.php">MIT</a> Dual licensed under <a class="external" href="http://www.opensource.org/licenses/mit-license.php">MIT</a>
or <a class="external" href="http://www.opensource.org/licenses/gpl-license.php">GPL</a> licenses. or <a class="external" href="http://www.opensource.org/licenses/gpl-license.php">GPL</a> licenses.
@ -298,7 +298,9 @@
<li><a href="example-option-sort-order.html">Direction of initial sort</a></li> <li><a href="example-option-sort-order.html">Direction of initial sort</a></li>
<li><a href="example-apply-widget.html">Applying widgets</a></li> <li><a href="example-apply-widget.html">Applying widgets</a></li>
<li><a href="example-zebra.html">Applying the zebra stripe widget</a></li> <li><a href="example-zebra.html">Applying the zebra stripe widget</a></li>
<li><a href="example-options-headers.html">Disable header using options</a></li> <li><a href="example-options-headers.html">Disable sort using headers options</a></li>
<li><a href="example-options-headers-locked.html">Lock sort order using header options</a></li>
<li><a href="example-options-headers-order.html">Set initial sort order using header options</a></li>
<li><a href="example-option-sort-key.html">Change the default multi-sorting key</a></li> <li><a href="example-option-sort-key.html">Change the default multi-sorting key</a></li>
</ul> </ul>
<strong>Metadata - setting inline options</strong> <strong>Metadata - setting inline options</strong>
@ -307,7 +309,6 @@
<li><a href="example-meta-headers.html">Disable header using metadata</a></li> <li><a href="example-meta-headers.html">Disable header using metadata</a></li>
<li><a href="example-meta-parsers.html">Setting column parser using metadata</a></li> <li><a href="example-meta-parsers.html">Setting column parser using metadata</a></li>
</ul> </ul>
<strong>Advanced</strong> <strong>Advanced</strong>
<ul> <ul>
<li><a href="example-triggers.html">Triggers sortEnd and sortStart (Displaying sorting progress)</a></li> <li><a href="example-triggers.html">Triggers sortEnd and sortStart (Displaying sorting progress)</a></li>
@ -506,14 +507,20 @@
<pre class="js">$(function(){ <pre class="js">$(function(){
$("table").tablesorter({ $("table").tablesorter({
headers: { headers: {
0: { sorter: false }, // disable first column 0: { sorter: false }, // disable first column - see Example 1
1: { sorter: "digit" }, // sort second column numerically 1: { sorter: "digit" }, // sort second column numerically
4: { sorter: "shortDate" } // sort the fifth column by date (e.g. mm/dd/yyyy if the date format is "us") 2: { sorter: "shortDate" } // sort the fifth column by date (e.g. mm/dd/yyyy if the date format is "us")
3: { lockedOrder: "asc" }, // lock the sort order - this option will not work if added as metadata - see Example 2
4: { sortInitialOrder: "desc" }, // Initial sort order direction of fourth column - see Example 3
} }
}); });
});</pre></div> });</pre></div>
</td> </td>
<td><a href="example-options-headers.html">Example</a></td> <td>
Ex:<a href="example-options-headers.html">1</a>
<a href="example-options-headers-locked.html">2</a>
<a href="example-options-headers-order.html">3</a>
</td>
</tr> </tr>
<tr id="onrenderheader"> <tr id="onrenderheader">
@ -635,8 +642,11 @@
<td>sortInitialOrder</td> <td>sortInitialOrder</td>
<td>String</td> <td>String</td>
<td>"asc"</td> <td>"asc"</td>
<td>When clicking the header for the first time, the direction it sorts. Valid arguments are <code class="hilight">"asc"</code> for Ascending or <code class="hilight">"desc"</code> for Descending.</td> <td>
<td><a href="example-option-sort-order.html">Example</a></td> When clicking the header for the first time, the direction it sorts. Valid arguments are <code class="hilight">"asc"</code> for Ascending or <code class="hilight">"desc"</code> for Descending.<br>
<span class="tip"><em>New!</em></span> in 2.0.8: This order can also be set by desired column using the <a href="#headers"><code class="hilight">headers</code></a> option.
</td>
<td>Ex:<a href="example-option-sort-order.html">1</a> <a href="example-options-headers-order.html">2</a></td>
</tr> </tr>
<tr id="sortlocalecompare"> <tr id="sortlocalecompare">
@ -707,7 +717,7 @@ $(function(){
<tr id="widgetzebra"> <tr id="widgetzebra">
<td><a href="#" class="toggle2">widgetZebra</a></td> <td><a href="#" class="toggle2">widgetZebra</a></td>
<td>Object with Array</td> <td>Object with Array</td>
<td>{<br>&nbsp;css :<br>&nbsp;&nbsp;["even", "odd"]<br>}</td> <td>{css:["even","odd"]}</td>
<td> <td>
When the zebra striping widget is initialized, it automatically applied the default class names of <code class="hilight">"even"</code> and <code class="hilight">"odd"</code>. When the zebra striping widget is initialized, it automatically applied the default class names of <code class="hilight">"even"</code> and <code class="hilight">"odd"</code>.
<div class="collapsible"> <div class="collapsible">
@ -727,7 +737,7 @@ $(function(){
<td>Boolean</td> <td>Boolean</td>
<td>false</td> <td>false</td>
<td>Indicates if tablesorter should apply fixed widths to the table columns. This is useful for the Pager companion. <td>Indicates if tablesorter should apply fixed widths to the table columns. This is useful for the Pager companion.
<br><br><del>Requires the <a href="#Download-Addons">jQuery dimension plugin</a> to work.</del> This is now part of the jQuery core.</a></td> <br><del>Requires the <a href="#Download-Addons">jQuery dimension plugin</a> to work.</del> This is now part of the jQuery core.</a></td>
<td><a href="example-pager.html">Example</a></td> <td><a href="example-pager.html">Example</a></td>
</tr> </tr>

2
index.html
View File

@ -12,7 +12,7 @@
<!-- Pick a theme, load the plugin & initialize plugin --> <!-- Pick a theme, load the plugin & initialize plugin -->
<link href="css/blue/style.css" rel="stylesheet"> <link href="css/blue/style.css" rel="stylesheet">
<script src="js/jquery.tablesorter.js"></script> <script src="js/jquery.tablesorter.min.js"></script>
<script> <script>
$(function(){ $(function(){
$('table').tablesorter(); $('table').tablesorter();

42
js/jquery.tablesorter.js
View File

@ -1,6 +1,6 @@
/* /*
* TableSorter 2.0 - Client-side table sorting with ease! * TableSorter 2.0 - Client-side table sorting with ease!
* Version 2.0.7 * Version 2.0.8
* @requires jQuery v1.2.3 * @requires jQuery v1.2.3
* *
* Copyright (c) 2007 Christian Bach * Copyright (c) 2007 Christian Bach
@ -100,7 +100,7 @@
sortList: [], sortList: [],
headerList: [], headerList: [],
dateFormat: "us", dateFormat: "us",
decimal: /\.|\,/g, decimal: /\.|\,/g, // not used
onRenderHeader: null, onRenderHeader: null,
selectorHeaders: 'thead th', selectorHeaders: 'thead th',
tableClass : 'tablesorter', tableClass : 'tablesorter',
@ -355,8 +355,9 @@
} }
function formatSortingOrder(v) { function formatSortingOrder(v) {
if (typeof(v) !== "Number") { if (typeof(v) !== "number") {
return (v.toLowerCase() === "desc") ? 1 : 0; // look for "d" instead of "desc"
return (v.toLowerCase().charAt(0) === "d") ? 1 : 0;
} else { } else {
return (v === 1) ? 1 : 0; return (v === 1) ? 1 : 0;
} }
@ -370,15 +371,20 @@
return ((table.config.headers[i]) && (table.config.headers[i].sorter === false)); return ((table.config.headers[i]) && (table.config.headers[i].sorter === false));
} }
function checkHeaderOptionsSortingLocked(table, i) { function checkHeaderLocked(table, i) {
if ((table.config.headers[i]) && (table.config.headers[i].lockedOrder)) { return table.config.headers[i].lockedOrder; } if ((table.config.headers[i]) && (table.config.headers[i].lockedOrder !== null)) { return table.config.headers[i].lockedOrder; }
return false; return false;
} }
function checkHeaderOrder(table, i) {
if ((table.config.headers[i]) && (table.config.headers[i].sortInitialOrder)) { return table.config.headers[i].sortInitialOrder; }
return table.config.sortInitialOrder;
}
function buildHeaders(table) { function buildHeaders(table) {
var meta = ($.metadata) ? true : false, var meta = ($.metadata) ? true : false,
header_index = computeTableHeaderCellIndexes(table), header_index = computeTableHeaderCellIndexes(table),
time, $tableHeaders; $th, lock, time, $tableHeaders;
if (table.config.debug) { if (table.config.debug) {
time = new Date(); time = new Date();
} }
@ -387,12 +393,14 @@
.each(function (index) { .each(function (index) {
this.column = header_index[this.parentNode.rowIndex + "-" + this.cellIndex]; this.column = header_index[this.parentNode.rowIndex + "-" + this.cellIndex];
// this.column = index; // this.column = index;
this.order = formatSortingOrder(table.config.sortInitialOrder); this.order = formatSortingOrder( checkHeaderOrder(table, index) );
this.count = this.order; this.count = this.order;
if (checkHeaderMetadata(this) || checkHeaderOptions(table, index)) { this.sortDisabled = true; } if (checkHeaderMetadata(this) || checkHeaderOptions(table, index)) { this.sortDisabled = true; }
if (checkHeaderOptionsSortingLocked(table, index)) { this.order = this.lockedOrder = checkHeaderOptionsSortingLocked(table, index); } this.lockedOrder = false;
lock = checkHeaderLocked(table, index);
if (typeof(lock) !== 'undefined' && lock !== false) { this.order = this.lockedOrder = formatSortingOrder(lock); }
if (!this.sortDisabled) { if (!this.sortDisabled) {
var $th = $(this).addClass(table.config.cssHeader); $th = $(this).addClass(table.config.cssHeader);
if (table.config.onRenderHeader) { table.config.onRenderHeader.apply($th); } if (table.config.onRenderHeader) { table.config.onRenderHeader.apply($th); }
} }
// add cell to headerList // add cell to headerList
@ -402,6 +410,7 @@
benchmark("Built headers:", time); benchmark("Built headers:", time);
log($tableHeaders); log($tableHeaders);
} }
console.debug($tableHeaders);
return $tableHeaders; return $tableHeaders;
} }
@ -584,9 +593,8 @@
// get current column sort order // get current column sort order
this.order = this.count++ % 2; this.order = this.count++ % 2;
// always sort on the locked order. // always sort on the locked order.
if(this.lockedOrder) { this.order = this.lockedOrder; } if(typeof(this.lockedOrder) !== "undefined" && this.lockedOrder !== false) { this.order = this.lockedOrder; }
// user only whants to sort on one // user only whants to sort on one column
// column
if (!e[config.sortMultiSortKey]) { if (!e[config.sortMultiSortKey]) {
// flush the sort list // flush the sort list
config.sortList = []; config.sortList = [];
@ -768,10 +776,10 @@
id: "digit", id: "digit",
is: function(s, table){ is: function(s, table){
var c = table.config; var c = table.config;
return $.tablesorter.isDigit(s, c); return $.tablesorter.isDigit(s.replace(/,/g, ""), c); // isDigit(s, c);
}, },
format: function(s){ format: function(s){
return $.tablesorter.formatFloat(s); return $.tablesorter.formatFloat(s.replace(/,/g, "")); // formatFloat(s);
}, },
type: "numeric" type: "numeric"
}); });
@ -779,10 +787,10 @@
ts.addParser({ ts.addParser({
id: "currency", id: "currency",
is: function(s){ is: function(s){
return (/^[£$€?.]/).test(s); return (/^[£$€¤¥¢?.]/).test(s);
}, },
format: function(s){ format: function(s){
return $.tablesorter.formatFloat(s.replace(new RegExp(/[£$€]/g), "")); return $.tablesorter.formatFloat(s.replace(new RegExp(/[^0-9.\-]/g), "")); // RegExp(/[£$€]/g), ""));
}, },
type: "numeric" type: "numeric"
}); });

4
js/jquery.tablesorter.min.js vendored
View File

File diff suppressed because one or more lines are too long