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

added selectorsort option - issue #137

Browse Source
This commit is contained in:
Mottie 2012-09-26 14:24:55 -05:00
parent a9dd830893
commit 8505b22509
2 changed files with 166 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

151
docs/example-option-selectorsort.html Normal file
View File

@ -0,0 +1,151 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Using selectorSort</title>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/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>
<style>
.search { float: right; }
</style>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/theme.default.css">
<script src="../js/jquery.tablesorter.js"></script>
<script id="js">$(function() {
// call the tablesorter plugin
$("table").tablesorter({
selectorSort : 'a'
});
});</script>
</head>
<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>Using selectorSort</h2>
<h3>Flexible client-side table sorting</h3>
<a href="index.html">Back to documentation</a>
</div>
<div id="main">
<p class="tip">
<em>NOTE!</em> Click on any column header <strong>link</strong> to sort that column. Clicking anywhere else within the header will not initiate a sort.
</p>
<h1>Demo</h1><br>
<div id="demo"><table class="tablesorter">
<thead>
<tr>
<th><a href="#">Account #</a> aa</th>
<th><a href="#">First Name</a> bb</th>
<th><a href="#">Last Name</a> cc</th>
<th><a href="#">Age</a> dd</th>
<th><a href="#">Total</a> ee</th>
<th><a href="#">Discount</a> ff</th>
<th class="sorter-false"><a href="#">Diff</a> gg</th>
</tr>
</thead>
<tbody>
<tr>
<td>A43</td>
<td>Peter</td>
<td>Parker</td>
<td>28</td>
<td>9.99</td>
<td>20.3%</td>
<td>+3</td>
</tr>
<tr>
<td>A255</td>
<td>John</td>
<td>Hood</td>
<td>33</td>
<td>19.99</td>
<td>25.1%</td>
<td>-7</td>
</tr>
<tr>
<td>A33</td>
<td>Clark</td>
<td>Kent</td>
<td>18</td>
<td>2.89</td>
<td>44.2%</td>
<td>-15</td>
</tr>
<tr>
<td>A1</td>
<td>Bruce</td>
<td>Almighty</td>
<td>45</td>
<td>153.19</td>
<td>44%</td>
<td>+19</td>
</tr>
<tr>
<td>A102</td>
<td>Bruce</td>
<td>Evans</td>
<td>56</td>
<td>$153.19</td>
<td>23%</td>
<td>+9</td>
</tr>
<tr>
<td>A256</td>
<td>John</td>
<td>Clark</td>
<td>44</td>
<td>($19.89)</td>
<td>25.1%</td>
<td>(5)</td>
</tr>
<tr>
<td>A23</td>
<td>Elvis</td>
<td>Presley</td>
<td>24</td>
<td>($9.99)</td>
<td>50%</td>
<td>(22)</td>
</tr>
<tr>
<td>A10</td>
<td>Frank</td>
<td>Carter</td>
<td>40</td>
<td>-12.99</td>
<td>20%</td>
<td>(6)</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-empty.html">Sorting empty cells &rsaquo;&rsaquo;</a>
</div>
</div>
</body>
</html>

26
js/jquery.tablesorter.js
View File

@ -82,6 +82,7 @@
// selectors
selectorHeaders : '> thead th, > thead td',
selectorSort : 'th, td', // jQuery selector of content within selectorHeaders that is clickable to trigger a sort
selectorRemove : 'tr.remove-me',
// advanced
@ -548,8 +549,11 @@
// apply event handling to headers
// this is to big, perhaps break it out?
$headers
// http://stackoverflow.com/questions/5312849/jquery-find-self
.find('*').andSelf().filter(c.selectorSort)
.unbind('mousedown.tablesorter mouseup.tablesorter')
.bind('mousedown.tablesorter mouseup.tablesorter', function(e, external) {
var $cell = $(this).closest('th, td'), cell = $cell[0];
// only recognize left clicks
if ((e.which || e.button) !== 1) { return false; }
// set timer on mousedown
@ -560,17 +564,17 @@
// ignore long clicks (prevents resizable widget from initializing a sort)
if (external !== true && (new Date().getTime() - downTime > 250)) { return false; }
if (c.delayInit && !c.cache) { buildCache($this[0]); }
if (!this.sortDisabled) {
if (!cell.sortDisabled) {
// Only call sortStart if sorting is enabled
$this.trigger("sortStart", $this[0]);
// store exp, for speed
$cell = $(this);
// $cell = $(this);
k = !e[c.sortMultiSortKey];
// get current column sort order
this.count = (this.count + 1) % (c.sortReset ? 3 : 2);
cell.count = (cell.count + 1) % (c.sortReset ? 3 : 2);
// reset all sorts on non-current column - issue #30
if (c.sortRestart) {
i = this;
i = cell;
$headers.each(function() {
// only reset counts on columns that weren't just clicked on and if not included in a multisort
if (this !== i && (k || !$(this).is('.' + c.cssDesc + ',.' + c.cssAsc))) {
@ -579,7 +583,7 @@
});
}
// get current column index
i = this.column;
i = cell.column;
// user only wants to sort on one column
if (k) {
// flush the sort list
@ -593,12 +597,12 @@
}
}
// add column to sort list
o = this.order[this.count];
o = cell.order[cell.count];
if (o < 2) {
c.sortList.push([i, o]);
// add other columns if header spans across multiple
if (this.colSpan > 1) {
for (j = 1; j < this.colSpan; j++) {
if (cell.colSpan > 1) {
for (j = 1; j < cell.colSpan; j++) {
c.sortList.push([i + j, o]);
}
}
@ -627,12 +631,12 @@
}
} else {
// add column to sort list array
o = this.order[this.count];
o = cell.order[cell.count];
if (o < 2) {
c.sortList.push([i, o]);
// add other columns if header spans across multiple
if (this.colSpan > 1) {
for (j = 1; j < this.colSpan; j++) {
if (cell.colSpan > 1) {
for (j = 1; j < cell.colSpan; j++) {
c.sortList.push([i + j, o]);
}
}