Advanced HtmlTable / GridView auto sort example
this is an expansion for this
http://bresleveloper.blogspot.co.il/2012/09/easy-sort-html-table-grid-view-using.html
this time i just decided to bring all the code and comment it
example http://jsbin.com/agijer/5/edit
//* @author James Padolsey (http://james.padolsey.com)
http://james.padolsey.com/javascript/sorting-elements-with-jquery/
jQuery.fn.sortElements = (function () {
var sort = [].sort;
return function (comparator, getSortable) {
getSortable = getSortable || function () { return this; };
var placements = this.map(function () {
var sortElement = getSortable.call(this),
parentNode = sortElement.parentNode,
nextSibling = parentNode.insertBefore(
document.createTextNode(''),
sortElement.nextSibling
);
return function () {
if (parentNode === this) {
throw new Error("You can't sort elements if any one is a descendant of another.");
}
parentNode.insertBefore(this, nextSibling);
parentNode.removeChild(nextSibling);
};
});
return sort.call(this, comparator).each(function (i) {
placements[i].call(getSortable.call(this));
});
};
})();
//from now on my code
//here i sort the elements by their innerText or date if needed
function MakeTableSortable(tableID) {
$("#" + tableID + " th").click(function () {
var index = this.cellIndex;
if (this.abc == null) { this.abc = true; }
else { this.abc = !this.abc; }
$("#" + tableID + " tr").sortElements(function (a, b) {
if (a.cells[0].tagName == "TH" || b.cells[0].tagName == "TH") {
return 0;
}
var _a = a.cells[index].innerText.toLowerCase();
var _b = b.cells[index].innerText.toLowerCase();
//test if _a&_b r datetime
var _da = MakeMyDate(_a);
if ('Invalid Date' != _da) {
_a = _da;
_b = MakeMyDate(_b);
}
//test if number
if (/^\d+$/.test(_a)) {
_a = parseInt(_a, 10);
_b = parseInt(_b, 10);
}
if (!a.parentNode.rows[0].cells[index].abc) {
if (_a > _b) return -1;
if (_a < _b) return 1;
return 0;
}
if (_a > _b) return 1;
if (_a < _b) return -1;
return 0;
});
});
//this is just from the hand on the TH
$("#" + tableID + " th").each(function () {
$(this).hover(function () { $(this).css("cursor", "pointer"); },
function () { $(this).css("cursor", "auto"); });
});
}
//this is so that the only thing i need to do is add the js reference
window.onload = function () {
var tables = document.getElementsByTagName("table");
for (var i = 0; i < tables.length; i++) {
MakeTableSortable(tables[i].id);
}
}
//but there was a case. p.s. if the table won't sort 2 ways but only 1 it can be cuz the onload works plus u put this so every click sorts it twice
function ManualySetAllTablesSortable() {
var tables = document.getElementsByTagName("table");
for (var i = 0; i < tables.length; i++) {
MakeTableSortable(tables[i].id);
}
}
//and finally the Date object wouldn't parse right my datetime format, also for some mysterious reason it parsed a month earlier like 09 to Aug, so i had to adjust that, my advice is to test it and/or re-write it as needed
function MakeMyDate(strdate) {
var yy = strdate.substring(6, 10);
var MM = strdate.substring(3, 5);
MM = parseInt(MM, 0) - 1;
var dd = strdate.substring(0, 2);
var hh = strdate.substring(11, 13);
var mm = strdate.substring(14, 16);
var ss = strdate.substring(17, 19);
return new Date(yy, MM, dd, hh, mm, ss, 0);
}
GL&HF!
http://bresleveloper.blogspot.co.il/2012/09/easy-sort-html-table-grid-view-using.html
this time i just decided to bring all the code and comment it
example http://jsbin.com/agijer/5/edit
//* @author James Padolsey (http://james.padolsey.com)
http://james.padolsey.com/javascript/sorting-elements-with-jquery/
jQuery.fn.sortElements = (function () {
var sort = [].sort;
return function (comparator, getSortable) {
getSortable = getSortable || function () { return this; };
var placements = this.map(function () {
var sortElement = getSortable.call(this),
parentNode = sortElement.parentNode,
nextSibling = parentNode.insertBefore(
document.createTextNode(''),
sortElement.nextSibling
);
return function () {
if (parentNode === this) {
throw new Error("You can't sort elements if any one is a descendant of another.");
}
parentNode.insertBefore(this, nextSibling);
parentNode.removeChild(nextSibling);
};
});
return sort.call(this, comparator).each(function (i) {
placements[i].call(getSortable.call(this));
});
};
})();
//from now on my code
//here i sort the elements by their innerText or date if needed
function MakeTableSortable(tableID) {
$("#" + tableID + " th").click(function () {
var index = this.cellIndex;
if (this.abc == null) { this.abc = true; }
else { this.abc = !this.abc; }
$("#" + tableID + " tr").sortElements(function (a, b) {
if (a.cells[0].tagName == "TH" || b.cells[0].tagName == "TH") {
return 0;
}
var _a = a.cells[index].innerText.toLowerCase();
var _b = b.cells[index].innerText.toLowerCase();
//test if _a&_b r datetime
var _da = MakeMyDate(_a);
if ('Invalid Date' != _da) {
_a = _da;
_b = MakeMyDate(_b);
}
//test if number
if (/^\d+$/.test(_a)) {
_a = parseInt(_a, 10);
_b = parseInt(_b, 10);
}
if (!a.parentNode.rows[0].cells[index].abc) {
if (_a > _b) return -1;
if (_a < _b) return 1;
return 0;
}
if (_a > _b) return 1;
if (_a < _b) return -1;
return 0;
});
});
//this is just from the hand on the TH
$("#" + tableID + " th").each(function () {
$(this).hover(function () { $(this).css("cursor", "pointer"); },
function () { $(this).css("cursor", "auto"); });
});
}
//this is so that the only thing i need to do is add the js reference
window.onload = function () {
var tables = document.getElementsByTagName("table");
for (var i = 0; i < tables.length; i++) {
MakeTableSortable(tables[i].id);
}
}
//but there was a case. p.s. if the table won't sort 2 ways but only 1 it can be cuz the onload works plus u put this so every click sorts it twice
function ManualySetAllTablesSortable() {
var tables = document.getElementsByTagName("table");
for (var i = 0; i < tables.length; i++) {
MakeTableSortable(tables[i].id);
}
}
//and finally the Date object wouldn't parse right my datetime format, also for some mysterious reason it parsed a month earlier like 09 to Aug, so i had to adjust that, my advice is to test it and/or re-write it as needed
function MakeMyDate(strdate) {
var yy = strdate.substring(6, 10);
var MM = strdate.substring(3, 5);
MM = parseInt(MM, 0) - 1;
var dd = strdate.substring(0, 2);
var hh = strdate.substring(11, 13);
var mm = strdate.substring(14, 16);
var ss = strdate.substring(17, 19);
return new Date(yy, MM, dd, hh, mm, ss, 0);
}
GL&HF!
Comments
Post a Comment