Update sorttable.js to allow sort on page load using the new sorttable.innerSortFunction().
This commit is contained in:
parent
a0ebc62ab4
commit
e8ea6b0d48
|
@ -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)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ******************************************************************
|
/* ******************************************************************
|
||||||
|
|
Loading…
Reference in New Issue