-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
92 lines (92 loc) · 4.58 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
"use strict";
const configureTable = {
/**************************************************************
USER EDITABLE AREA
*****************************************************************/
tableClasses: ["", "", ""],
noSortClass: "",
// IMPORTANT BOTH CLASSES NEED TO BE POPULATED FOR THE CLASSES TO BE ADDED
ascendingIconClass: "sort-asc",
descendingIconClass: "sort-desc" // A single class added to clicked table header for descending sort (Can be used for Icons etc)
/**************************************************************
END
*****************************************************************/
};
const sortableTables = document.querySelectorAll('.sortable');
if (sortableTables.length) {
sortableTables.forEach(table => {
const headers = Array.from(table.querySelectorAll('thead th'));
const rows = table.querySelectorAll('tbody tr');
configureTable.tableClasses.filter(cls => cls != "").length ? table.classList.add(...configureTable.tableClasses) : false;
headers.forEach((header, headerIndex) => {
if (!header.classList.contains(configureTable.noSortClass != "" ? configureTable.noSortClass : 'no-sort')) {
header.addEventListener('click', () => {
let filteredArray = [], filterDirection = 'asc';
rows.forEach((row, index) => {
const cell = Array.from(row.querySelectorAll('td')).filter((e, index) => index == headerIndex).pop(), sortItem = { cellText: cell.innerHTML, rowElement: row };
filteredArray.push(sortItem);
});
if (!header.classList.contains('filtered')) {
headers.forEach(el => {
el.classList.remove('filtered');
if (configureTable.ascendingIconClass && configureTable.descendingIconClass) {
el.classList.remove(configureTable.ascendingIconClass, configureTable.descendingIconClass);
}
el.removeAttribute('data-sort-direction');
});
header.classList.add('filtered');
}
if (header.getAttribute('data-sort-direction') != SortDirection.Ascending) {
filterDirection = SortDirection.Ascending;
header.setAttribute('data-sort-direction', SortDirection.Ascending);
sortCells(filteredArray, rows, headerIndex, filterDirection);
}
else {
filterDirection = SortDirection.Descending;
header.setAttribute('data-sort-direction', SortDirection.Descending);
sortCells(filteredArray, rows, headerIndex, filterDirection);
}
if (configureTable.ascendingIconClass != '' && configureTable.descendingIconClass != '') {
header.classList.remove(filterDirection == SortDirection.Ascending ? configureTable.descendingIconClass : configureTable.ascendingIconClass);
header.classList.add(filterDirection == SortDirection.Ascending ? configureTable.ascendingIconClass : configureTable.descendingIconClass);
}
const tb = table.querySelector('tbody');
if (tb) {
tb.innerHTML = "";
filteredArray.forEach(element => {
tb.append(element.rowElement);
});
}
});
}
});
});
}
function isNumeric(value) {
return /^-?\d+$/.test(value);
}
function sortCells(cellArray, rows, headerIndex, direction) {
cellArray.sort(function (a, b) {
if (direction == "asc") {
if (isNumeric(a.cellText)) {
return parseInt(a.cellText) - parseInt(b.cellText);
}
else {
return a.cellText > b.cellText ? 1 : -1;
}
}
else {
if (isNumeric(a.cellText)) {
return parseInt(b.cellText) - parseInt(a.cellText);
}
else {
return a.cellText > b.cellText ? -1 : 1;
}
}
});
}
var SortDirection;
(function (SortDirection) {
SortDirection["Ascending"] = "asc";
SortDirection["Descending"] = "desc";
})(SortDirection || (SortDirection = {}));