Add: sortTableCol js function
This commit is contained in:
parent
579e3ee569
commit
33007b91b5
1 changed files with 70 additions and 0 deletions
|
@ -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 = '↓';
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
order_icon.innerHTML = '↑';
|
||||||
|
}
|
||||||
|
|
||||||
|
let html = '';
|
||||||
|
obj_key.forEach(function(chave) {
|
||||||
|
html += value_list[chave];
|
||||||
|
});
|
||||||
|
table.getElementsByTagName('tbody')[0].innerHTML = html;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{% endblock content %}
|
{% endblock content %}
|
||||||
|
|
Loading…
Reference in a new issue