/**
* Written by Neil Crosby.
* http://www.workingwith.me.uk/articles/scripting/standardista_table_sorting
*
* This module is based on Stuart Langridge's "sorttable" code. Specifically,
* the determineSortFunction, sortCaseInsensitive, sortDate, sortNumeric, and
* sortCurrency functions are heavily based on his code. This module would not
* have been possible without Stuart's earlier outstanding work.
*
* Use this wherever you want, but please keep this comment at the top of this file.
*
* Copyright (c) 2006 Neil Crosby
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
**/
// $Log: ltableSort.js $
// Revision 1.2 2007-11-15 01:10:25-04 Battersby
// - street number comparison was alpha instead of numerical
//
// Revision 1.1 2007-10-11 14:26:53-04 Battersby
// Initial revision
//
/*
## How to use Standardista Table Sorting ##
1. First, download the [Standardista Table Sorting module][2].
2. Include the .js files in the HEAD of your webpage:
3. Make sure that the table you want to be sortable has a THEAD and a TBODY.
4. Give the table that wants to be able to be sorted the class "sortable".
5. Load the page, and you'll be able to sort the table by clicking on its
headers!
## Extended Pointers for using Standardista Table Sorting ##
- Every table that you want users to be able to sort **must** contain a THEAD
and a TBODY section. If you're using tables for displaying data, this is
just good practice anyway. If you aren't, then it's not a huge hardship to
wrap your heading row in a THEAD and your data rows in a TBODY, is it?
- If you have more than one row in your THEAD then the last row will be the
one that receives the links which the user can use to sort the table.
- If you want to leave a row (or more) of data sitting statically at the
bottom of the table, then put it in a TFOOT section. Remember, the TFOOT
should come *between* the THEAD and the TBODY in your HTML source.
*/
/* SAMPLE USAGE (by Paul Battersby
NOTE: the class="sortable" , also note the use of thead and tbody
- this will use black arrows to indicate sort order
class = "sortable_wht"
- this will use white arrows to indicate sort order
| col1 | col2 | col3 | col4 |
| one | 1 | 2 | 123 street |
| two | 14 | 5 | 333 address |
| three | 12 | 6 | 543 boston |
*/
var standardistaTableSorting = {
that: false,
isOdd: false,
sortColumnIndex : -1,
lastAssignedId : 0,
newRows: -1,
lastSortedTable: -1,
// arrows to use to indicate sort direction
upArrow_wht : "ltableSortUpArrow_wht.gif",
upArrow_blk : "ltableSortUpArrow_blk.gif",
downArrow_wht : "ltableSortDownArrow_wht.gif",
downArrow_blk : "ltableSortDownArrow_blk.gif",
/**
* Initialises the Standardista Table Sorting module
**/
init : function() {
// first, check whether this web browser is capable of running this script
if (!document.getElementsByTagName) {
return;
}
this.that = this;
this.run();
},
/**
* Runs over each table in the document, making it sortable if it has a class
* assigned named "sortable" and an id assigned.
**/
run : function() {
var tables = document.getElementsByTagName("table");
var that = standardistaTableSorting.that;
for (var i=0; i < tables.length; i++) {
var thisTable = tables[i];
// sort table, display white arrows
if (css.elementHasClass(thisTable, 'sortable_wht')) {
that.upArrowImg = that.upArrow_wht;
that.downArrowImg = that.downArrow_wht;
this.makeSortable(thisTable);
// sort table, display black arrows (default)
} else if (css.elementHasClass(thisTable, 'sortable')) {
that.upArrowImg = that.upArrow_blk;
that.downArrowImg = that.downArrow_blk;
this.makeSortable(thisTable);
} /* endif */
}
},
/**
* Makes the given table sortable.
**/
makeSortable : function(table) {
// first, check if the table has an id. if it doesn't, give it one
if (!table.id) {
table.id = 'sortableTable'+this.lastAssignedId++;
}
// if this table does not have a thead, we don't want to know about it
if (!table.tHead || !table.tHead.rows || 0 == table.tHead.rows.length) {
return;
}
// we'll assume that the last row of headings in the thead is the row that
// wants to become clickable
var row = table.tHead.rows[table.tHead.rows.length - 1];
for (var i=0; i < row.cells.length; i++) {
// create a link with an onClick event which will
// control the sorting of the table
var linkEl = createElement('a');
linkEl.href = '#';
linkEl.onclick = this.headingClicked;
linkEl.setAttribute('columnId', i);
linkEl.title = 'Click to sort';
// move the current contents of the cell that we're
// hyperlinking into the hyperlink
var innerEls = row.cells[i].childNodes;
for (var j = 0; j < innerEls.length; j++) {
linkEl.appendChild(innerEls[j]);
}
// and finally add the new link back into the cell
row.cells[i].appendChild(linkEl);
var spanEl = createElement('span');
spanEl.className = 'tableSortArrow';
spanEl.appendChild(document.createTextNode('\u00A0\u00A0'));
row.cells[i].appendChild(spanEl);
}
if (css.elementHasClass(table, 'autostripe')) {
this.isOdd = false;
var rows = table.tBodies[0].rows;
// We appendChild rows that already exist to the tbody, so it moves them rather than creating new ones
for (var i=0;i 0) {
previousSortOrder = arrows[0].getAttribute('sortOrder');
}
// work out how we want to sort this column using the data in the first cell
// but just getting the first cell is no good if it contains no data
// so if the first cell just contains white space then we need to track
// down until we find a cell which does contain some actual data
var itm = ''
var rowNum = 0;
while ('' == itm && rowNum < table.tBodies[0].rows.length) {
itm = that.getInnerText(table.tBodies[0].rows[rowNum].cells[column]);
rowNum++;
}
itm = itm.replace(/^\s+/,""); // remove any leading space
var sortfn = that.determineSortFunction(itm);
// if the last column that was sorted was this one, then all we need to
// do is reverse the sorting on this column
if (table.id == that.lastSortedTable && column == that.sortColumnIndex) {
newRows = that.newRows;
newRows.reverse();
// otherwise, we have to do the full sort
} else {
that.sortColumnIndex = column;
var newRows = new Array();
for (var j = 0; j < table.tBodies[0].rows.length; j++) {
newRows[j] = table.tBodies[0].rows[j];
}
newRows.sort(sortfn);
}
that.moveRows(table, newRows);
that.newRows = newRows;
that.lastSortedTable = table.id;
// now, give the user some feedback about which way the column is sorted
// first, get rid of any arrows in any heading cells
var arrows = css.getElementsByClass(tr, 'tableSortArrow', 'span');
for (var j = 0; j < arrows.length; j++) {
var arrowParent = arrows[j].parentNode;
arrowParent.removeChild(arrows[j]);
if (arrowParent != td) {
spanEl = createElement('span');
spanEl.className = 'tableSortArrow';
spanEl.appendChild(document.createTextNode('\u00A0\u00A0'));
arrowParent.appendChild(spanEl);
}
}
// now, add back in some feedback
var spanEl = createElement('span');
spanEl.className = 'tableSortArrow';
if (null == previousSortOrder || '' == previousSortOrder || 'DESC' == previousSortOrder) {
// spanEl.appendChild(document.createTextNode(' \u2191'));
// try this (added by Paul Battersby):
img = document.createElement("IMG");
img.src = that.upArrowImg;
img.width = 14;
img.height = 14;
spanEl.appendChild(img);
spanEl.setAttribute('sortOrder', 'ASC');
} else {
// spanEl.appendChild(document.createTextNode(' \u2193'));
// try this (added by Paul Battersby):
img = document.createElement("IMG");
img.src = that.downArrowImg;
spanEl.appendChild(img);
spanEl.setAttribute('sortOrder', 'DESC');
}
td.appendChild(spanEl);
return false;
},
getInnerText : function(el) {
if ('string' == typeof el || 'undefined' == typeof el) {
return el;
}
if (el.innerText) {
return el.innerText; // Not needed but it is faster
}
var str = el.getAttribute('standardistaTableSortingInnerText');
if (null != str && '' != str) {
return str;
}
str = '';
var cs = el.childNodes;
var l = cs.length;
for (var i = 0; i < l; i++) {
// 'if' is considerably quicker than a 'switch' statement,
// in Internet Explorer which translates up to a good time
// reduction since this is a very often called recursive function
if (1 == cs[i].nodeType) { // ELEMENT NODE
str += this.getInnerText(cs[i]);
break;
} else if (3 == cs[i].nodeType) { //TEXT_NODE
str += cs[i].nodeValue;
break;
}
}
// set the innertext for this element directly on the element
// so that it can be retrieved early next time the innertext
// is requested
el.setAttribute('standardistaTableSortingInnerText', str);
return str;
},
determineSortFunction : function(itm) {
var sortfn;
// sort by address
if (itm.match(/^\d+\s+\w+/)) {
sortfn = this.sortAddress;
} else if (itm.match(/^\d\d[\/-]\d\d[\/-]\d\d\d\d$/)) {
sortfn = this.sortDate;
} else if (itm.match(/^\d\d[\/-]\d\d[\/-]\d\d$/)) {
sortfn = this.sortDate;
} else if (itm.match(/^[£$]/)) {
sortfn = this.sortCurrency;
} else if (itm.match(/^\d?\.?\d+$/)) {
sortfn = this.sortNumeric;
} else if (itm.match(/^[+-]?\d*\.?\d+([eE]-?\d+)?$/)) {
sortfn = this.sortNumeric;
} else if (itm.match(/^([01]?\d\d?|2[0-4]\d|25[0-5])\.([01]?\d\d?|2[0-4]\d|25[0-5])\.([01]?\d\d?|2[0-4]\d|25[0-5])\.([01]?\d\d?|2[0-4]\d|25[0-5])$/)) {
sortfn = this.sortIP;
} else {
sortfn = this.sortCaseInsensitive;
} /* endif */
return sortfn;
},
sortCaseInsensitive : function(a, b) {
var that = standardistaTableSorting.that;
var aa = that.getInnerText(a.cells[that.sortColumnIndex]).toLowerCase();
var bb = that.getInnerText(b.cells[that.sortColumnIndex]).toLowerCase();
if (aa==bb) {
return 0;
} else if (aa val.length) {
val = '0'+val;
}
vals[x] = val;
}
val = vals.join('.');
return val;
},
sortIP : function(a,b) {
var that = standardistaTableSorting.that;
var aa = that.makeStandardIPAddress(that.getInnerText(a.cells[that.sortColumnIndex]).toLowerCase());
var bb = that.makeStandardIPAddress(that.getInnerText(b.cells[that.sortColumnIndex]).toLowerCase());
if (aa==bb) {
return 0;
} else if (aa