108 lines
3.3 KiB
Plaintext
108 lines
3.3 KiB
Plaintext
/**
|
|
* delcare a table as sortable by adding class 'js-sortable'
|
|
*/
|
|
(function() {
|
|
'use strict';
|
|
|
|
window.utils = window.utils || {};
|
|
|
|
window.utils.sortable = function(table) {
|
|
var ASC = 1;
|
|
var DESC = -1;
|
|
|
|
var trs, ths, sortBy, sortDir, trContents;
|
|
|
|
function setup() {
|
|
trs = table.querySelectorAll('tr');
|
|
ths = table.querySelectorAll('th');
|
|
sortBy = 0;
|
|
sortDir = ASC;
|
|
trContents = [];
|
|
|
|
Array.from(trs).forEach(function(tr, rowIndex) {
|
|
if (rowIndex === 0) {
|
|
// register table headers as sort-listener
|
|
Array.from(tr.querySelectorAll('th')).forEach(function(th, thIndex) {
|
|
th.addEventListener('click', function(el) {
|
|
sortTableBy(thIndex);
|
|
});
|
|
});
|
|
} else {
|
|
// register table rows
|
|
trContents.push(Array.from(tr.querySelectorAll('td')).map(function(td) {
|
|
return td.innerHTML;
|
|
}));
|
|
}
|
|
});
|
|
}
|
|
setup();
|
|
|
|
function updateThs(thIndex, sortOrder) {
|
|
Array.from(ths).forEach(function (th) {
|
|
th.classList.remove('sorted-asc', 'sorted-desc');
|
|
});
|
|
var suffix = sortOrder > 0 ? 'asc' : 'desc';
|
|
ths[thIndex].classList.add('sorted-' + suffix);
|
|
}
|
|
|
|
function sortTableBy(thIndex) {
|
|
var sortKey = thIndex;
|
|
var sortOrder = ASC;
|
|
if (sortBy === sortKey) {
|
|
sortOrder = sortDir === ASC ? DESC : ASC;
|
|
}
|
|
|
|
trContents.sort(dynamicSortByType(sortKey, sortOrder));
|
|
trContents.sort(dynamicSortByKey(sortKey, sortOrder));
|
|
sortBy = thIndex;
|
|
sortDir = sortOrder;
|
|
updateThs(thIndex, sortOrder);
|
|
|
|
Array.from(trs).forEach(function(tr, trIndex) {
|
|
if (trIndex > 0) {
|
|
Array.from(tr.querySelectorAll('td')).forEach(function (td, tdIndex) {
|
|
td.innerHTML = trContents[trIndex - 1][tdIndex];
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
function dynamicSortByKey(key, order) {
|
|
return function (a,b) {
|
|
var aVal = parseInt(a[key]);
|
|
var bVal = parseInt(b[key]);
|
|
if ((isNaN(aVal) && !isNaN(bVal)) || (!isNaN(aVal) && isNaN(bVal))) {
|
|
return 1;
|
|
}
|
|
aVal = isNaN(aVal) ? a[key] : aVal;
|
|
bVal = isNaN(bVal) ? b[key] : bVal;
|
|
var result = (aVal < bVal) ? -1 : (aVal > bVal) ? 1 : 0;
|
|
return result * order;
|
|
}
|
|
}
|
|
|
|
function dynamicSortByType(key, order) {
|
|
return function (a,b) {
|
|
var aVal = parseInt(a[key]);
|
|
var bVal = parseInt(b[key]);
|
|
aVal = isNaN(aVal) ? a[key] : aVal;
|
|
bVal = isNaN(bVal) ? b[key] : bVal;
|
|
var res = (aVal < bVal ? -1 : aVal > bVal ? 1 : 0);
|
|
if (isNaN(aVal) && !isNaN(bVal)) {
|
|
res = -1;
|
|
}
|
|
if (!isNaN(aVal) && isNaN(bVal)) {
|
|
res = 1;
|
|
}
|
|
return res * order;
|
|
}
|
|
}
|
|
};
|
|
})();
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
Array.from(document.querySelectorAll('.js-sortable')).forEach(function(table) {
|
|
utils.sortable(table);
|
|
});
|
|
});
|