Update sorttable.js to allow sort on page load using the new sorttable.innerSortFunction().

This commit is contained in:
Darold Gilles 2013-01-28 19:05:10 +01:00
parent a0ebc62ab4
commit e8ea6b0d48
1 changed files with 30 additions and 28 deletions

View File

@ -3,19 +3,19 @@
version 2 version 2
7th April 2007 7th April 2007
Stuart Langridge, http://www.kryogenix.org/code/browser/sorttable/ Stuart Langridge, http://www.kryogenix.org/code/browser/sorttable/
Instructions: Instructions:
Download this file Download this file
Add <script src="sorttable.js"></script> to your HTML Add <script src="sorttable.js"></script> to your HTML
Add class="sortable" to any table you'd like to make sortable Add class="sortable" to any table you'd like to make sortable
Click on the headers to sort Click on the headers to sort
Thanks to many, many people for contributions and suggestions. Thanks to many, many people for contributions and suggestions.
Licenced as X11: http://www.kryogenix.org/code/browser/licence.html Licenced as X11: http://www.kryogenix.org/code/browser/licence.html
This basically means: do what you want with it. This basically means: do what you want with it.
*/ */
var stIsIE = /*@cc_on!@*/false; var stIsIE = /*@cc_on!@*/false;
sorttable = { sorttable = {
@ -26,19 +26,19 @@ sorttable = {
arguments.callee.done = true; arguments.callee.done = true;
// kill the timer // kill the timer
if (_timer) clearInterval(_timer); if (_timer) clearInterval(_timer);
if (!document.createElement || !document.getElementsByTagName) return; if (!document.createElement || !document.getElementsByTagName) return;
sorttable.DATE_RE = /^(\d\d?)[\/\.-](\d\d?)[\/\.-]((\d\d)?\d\d)$/; sorttable.DATE_RE = /^(\d\d?)[\/\.-](\d\d?)[\/\.-]((\d\d)?\d\d)$/;
forEach(document.getElementsByTagName('table'), function(table) { forEach(document.getElementsByTagName('table'), function(table) {
if (table.className.search(/\bsortable\b/) != -1) { if (table.className.search(/\bsortable\b/) != -1) {
sorttable.makeSortable(table); sorttable.makeSortable(table);
} }
}); });
}, },
makeSortable: function(table) { makeSortable: function(table) {
if (table.getElementsByTagName('thead').length == 0) { if (table.getElementsByTagName('thead').length == 0) {
// table doesn't have a tHead. Since it should have, create one and // table doesn't have a tHead. Since it should have, create one and
@ -49,9 +49,9 @@ sorttable = {
} }
// Safari doesn't support table.tHead, sigh // Safari doesn't support table.tHead, sigh
if (table.tHead == null) table.tHead = table.getElementsByTagName('thead')[0]; if (table.tHead == null) table.tHead = table.getElementsByTagName('thead')[0];
if (table.tHead.rows.length != 1) return; // can't cope with two header rows if (table.tHead.rows.length != 1) return; // can't cope with two header rows
// Sorttable v1 put rows with a class of "sortbottom" at the bottom (as // Sorttable v1 put rows with a class of "sortbottom" at the bottom (as
// "total" rows, for example). This is B&R, since what you're supposed // "total" rows, for example). This is B&R, since what you're supposed
// to do is put them in a tfoot. So, if there are sortbottom rows, // to do is put them in a tfoot. So, if there are sortbottom rows,
@ -73,7 +73,7 @@ sorttable = {
} }
delete sortbottomrows; delete sortbottomrows;
} }
// work through each column and calculate its type // work through each column and calculate its type
headrow = table.tHead.rows[0].cells; headrow = table.tHead.rows[0].cells;
for (var i=0; i<headrow.length; i++) { for (var i=0; i<headrow.length; i++) {
@ -89,10 +89,10 @@ sorttable = {
// make it clickable to sort // make it clickable to sort
headrow[i].sorttable_columnindex = i; headrow[i].sorttable_columnindex = i;
headrow[i].sorttable_tbody = table.tBodies[0]; headrow[i].sorttable_tbody = table.tBodies[0];
dean_addEvent(headrow[i],"click", function(e) { dean_addEvent(headrow[i],"click", sorttable.innerSortFunction = function(e) {
if (this.className.search(/\bsorttable_sorted\b/) != -1) { if (this.className.search(/\bsorttable_sorted\b/) != -1) {
// if we're already sorted by this column, just // if we're already sorted by this column, just
// reverse the table, which is quicker // reverse the table, which is quicker
sorttable.reverse(this.sorttable_tbody); sorttable.reverse(this.sorttable_tbody);
this.className = this.className.replace('sorttable_sorted', this.className = this.className.replace('sorttable_sorted',
@ -105,7 +105,7 @@ sorttable = {
return; return;
} }
if (this.className.search(/\bsorttable_sorted_reverse\b/) != -1) { if (this.className.search(/\bsorttable_sorted_reverse\b/) != -1) {
// if we're already sorted by this column in reverse, just // if we're already sorted by this column in reverse, just
// re-reverse the table, which is quicker // re-reverse the table, which is quicker
sorttable.reverse(this.sorttable_tbody); sorttable.reverse(this.sorttable_tbody);
this.className = this.className.replace('sorttable_sorted_reverse', this.className = this.className.replace('sorttable_sorted_reverse',
@ -117,7 +117,7 @@ sorttable = {
this.appendChild(sortfwdind); this.appendChild(sortfwdind);
return; return;
} }
// remove sorttable_sorted classes // remove sorttable_sorted classes
theadrow = this.parentNode; theadrow = this.parentNode;
forEach(theadrow.childNodes, function(cell) { forEach(theadrow.childNodes, function(cell) {
@ -130,7 +130,7 @@ sorttable = {
if (sortfwdind) { sortfwdind.parentNode.removeChild(sortfwdind); } if (sortfwdind) { sortfwdind.parentNode.removeChild(sortfwdind); }
sortrevind = document.getElementById('sorttable_sortrevind'); sortrevind = document.getElementById('sorttable_sortrevind');
if (sortrevind) { sortrevind.parentNode.removeChild(sortrevind); } if (sortrevind) { sortrevind.parentNode.removeChild(sortrevind); }
this.className += ' sorttable_sorted'; this.className += ' sorttable_sorted';
sortfwdind = document.createElement('span'); sortfwdind = document.createElement('span');
sortfwdind.id = "sorttable_sortfwdind"; sortfwdind.id = "sorttable_sortfwdind";
@ -151,18 +151,18 @@ sorttable = {
//sorttable.shaker_sort(row_array, this.sorttable_sortfunction); //sorttable.shaker_sort(row_array, this.sorttable_sortfunction);
/* and comment out this one */ /* and comment out this one */
row_array.sort(this.sorttable_sortfunction); row_array.sort(this.sorttable_sortfunction);
tb = this.sorttable_tbody; tb = this.sorttable_tbody;
for (var j=0; j<row_array.length; j++) { for (var j=0; j<row_array.length; j++) {
tb.appendChild(row_array[j][1]); tb.appendChild(row_array[j][1]);
} }
delete row_array; delete row_array;
}); });
} }
} }
}, },
guessType: function(table, column) { guessType: function(table, column) {
// guess the type of a column based on its first non-blank row // guess the type of a column based on its first non-blank row
sortfn = sorttable.sort_alpha; sortfn = sorttable.sort_alpha;
@ -172,7 +172,7 @@ sorttable = {
if (text.match(/^-?[£$¤]?[\d,.]+%?$/)) { if (text.match(/^-?[£$¤]?[\d,.]+%?$/)) {
return sorttable.sort_numeric; return sorttable.sort_numeric;
} }
// check for a date: dd/mm/yyyy or dd/mm/yy // check for a date: dd/mm/yyyy or dd/mm/yy
// can have / or . or - as separator // can have / or . or - as separator
// can be mm/dd as well // can be mm/dd as well
possdate = text.match(sorttable.DATE_RE) possdate = text.match(sorttable.DATE_RE)
@ -195,17 +195,19 @@ sorttable = {
} }
return sortfn; return sortfn;
}, },
getInnerText: function(node) { getInnerText: function(node) {
// gets the text we want to use for sorting for a cell. // gets the text we want to use for sorting for a cell.
// strips leading and trailing whitespace. // strips leading and trailing whitespace.
// this is *not* a generic getInnerText function; it's special to sorttable. // this is *not* a generic getInnerText function; it's special to sorttable.
// for example, you can override the cell text with a customkey attribute. // for example, you can override the cell text with a customkey attribute.
// it also gets .value for <input> fields. // it also gets .value for <input> fields.
if (!node) return "";
hasInputs = (typeof node.getElementsByTagName == 'function') && hasInputs = (typeof node.getElementsByTagName == 'function') &&
node.getElementsByTagName('input').length; node.getElementsByTagName('input').length;
if (node.getAttribute("sorttable_customkey") != null) { if (node.getAttribute("sorttable_customkey") != null) {
return node.getAttribute("sorttable_customkey"); return node.getAttribute("sorttable_customkey");
} }
@ -240,7 +242,7 @@ sorttable = {
} }
} }
}, },
reverse: function(tbody) { reverse: function(tbody) {
// reverse the rows in a tbody // reverse the rows in a tbody
newrows = []; newrows = [];
@ -252,14 +254,14 @@ sorttable = {
} }
delete newrows; delete newrows;
}, },
/* sort functions /* sort functions
each sort function takes two parameters, a and b each sort function takes two parameters, a and b
you are comparing a[0] and b[0] */ you are comparing a[0] and b[0] */
sort_numeric: function(a,b) { sort_numeric: function(a,b) {
aa = parseFloat(a[0].replace(/[^0-9.-]/g,'')); aa = parseFloat(a[0].replace(/[^0-9.-]/g,''));
if (isNaN(aa)) aa = 0; if (isNaN(aa)) aa = 0;
bb = parseFloat(b[0].replace(/[^0-9.-]/g,'')); bb = parseFloat(b[0].replace(/[^0-9.-]/g,''));
if (isNaN(bb)) bb = 0; if (isNaN(bb)) bb = 0;
return aa-bb; return aa-bb;
}, },
@ -308,7 +310,7 @@ sorttable = {
if (dt1<dt2) return -1; if (dt1<dt2) return -1;
return 1; return 1;
}, },
shaker_sort: function(list, comp_func) { shaker_sort: function(list, comp_func) {
// A stable sort function to allow multi-level sorting of data // A stable sort function to allow multi-level sorting of data
// see: http://en.wikipedia.org/wiki/Cocktail_sort // see: http://en.wikipedia.org/wiki/Cocktail_sort
@ -338,7 +340,7 @@ sorttable = {
b++; b++;
} // while(swap) } // while(swap)
} }
} }
/* ****************************************************************** /* ******************************************************************