Add: sortTableCol js function

This commit is contained in:
Aroy-Art 2024-08-24 23:31:14 +02:00
parent 579e3ee569
commit 33007b91b5
Signed by: Aroy
GPG key ID: DB9689E9391DD156

View file

@ -120,6 +120,76 @@
}
}
}
window.onload = function() {
document.querySelectorAll('th').forEach((element) => { // Table headers
element.addEventListener('click', function() {
let table = this.closest('table');
// If the column is sortable
if (this.querySelector('span')) {
let order_icon = this.querySelector('span');
let order = encodeURI(order_icon.innerHTML).includes('%E2%86%91') ? 'desc' : 'asc';
let separator = '-----'; // Separate the value of it's index, so data keeps intact
let value_list = {}; // <tr> Object
let obj_key = []; // Values of selected column
let string_count = 0;
let number_count = 0;
// <tbody> rows
table.querySelectorAll('tbody tr').forEach((line, index_line) => {
// Value of each field
let key = line.children[element.cellIndex].textContent.toUpperCase();
// Check if value is date, numeric or string
if (line.children[element.cellIndex].hasAttribute('data-timestamp')) {
// if value is date, we store it's timestamp, so we can sort like a number
key = line.children[element.cellIndex].getAttribute('data-timestamp');
}
else if (key.replace('-', '').match(/^[0-9,.]*$/g)) {
number_count++;
}
else {
string_count++;
}
value_list[key + separator + index_line] = line.outerHTML.replace(/(\t)|(\n)/g, ''); // Adding <tr> to object
obj_key.push(key + separator + index_line);
});
if (string_count === 0) { // If all values are numeric
console.log(obj_key);
obj_key.sort(function(a, b) {
return a.split(separator)[0] - b.split(separator)[0];
});
console.log(obj_key);
}
else {
console.log(obj_key);
obj_key.sort();
console.log(obj_key);
}
if (order === 'desc') {
console.log(obj_key);
obj_key.reverse();
console.log(obj_key);
order_icon.innerHTML = '&darr;';
}
else {
order_icon.innerHTML = '&uarr;';
}
let html = '';
obj_key.forEach(function(chave) {
html += value_list[chave];
});
table.getElementsByTagName('tbody')[0].innerHTML = html;
}
});
});
}
</script>
{% endblock content %}