Fixed sorting function for table
This commit is contained in:
parent
9be122198a
commit
4588ef9768
|
@ -178,15 +178,16 @@ const comparer = (idx, asc) => (a, b) =>
|
||||||
v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2)
|
v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2)
|
||||||
)(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));
|
)(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
// Find the table and its headers
|
// Find the table and its headers
|
||||||
const table = document.querySelector('table');
|
const table = document.querySelector('table');
|
||||||
const headers = table.querySelectorAll('th');
|
const headers = table.querySelectorAll('th[data-sort]');
|
||||||
|
|
||||||
// Add caret icon to initial header element
|
// Add caret icon to initial header element
|
||||||
const initialHeader = table.querySelector('[data-order]');
|
const initialHeader = table.querySelector('[data-order]');
|
||||||
initialHeader.innerHTML = `${initialHeader.innerText} <i class="bi bi-caret-down-fill"></i>`;
|
initialHeader.innerHTML = `${initialHeader.innerText} <i class="bi bi-caret-down-fill"></i>`;
|
||||||
|
|
||||||
// Attach click event listener to all headers
|
// Attach click event listener to all sortable headers
|
||||||
headers.forEach(th => th.addEventListener('click', function() {
|
headers.forEach(th => th.addEventListener('click', function() {
|
||||||
// Get the clicked header's index, sort order, and sortable attribute
|
// Get the clicked header's index, sort order, and sortable attribute
|
||||||
const thIndex = Array.from(th.parentNode.children).indexOf(th);
|
const thIndex = Array.from(th.parentNode.children).indexOf(th);
|
||||||
|
@ -209,11 +210,13 @@ headers.forEach(th => th.addEventListener('click', function() {
|
||||||
th.innerHTML = `${th.innerText} ${isAscending ? '<i class="bi bi-caret-down-fill"></i>' : '<i class="bi bi-caret-up-fill"></i>'}`;
|
th.innerHTML = `${th.innerText} ${isAscending ? '<i class="bi bi-caret-down-fill"></i>' : '<i class="bi bi-caret-up-fill"></i>'}`;
|
||||||
|
|
||||||
// Sort the table rows based on the clicked header
|
// Sort the table rows based on the clicked header
|
||||||
Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
|
Array.from(table.querySelectorAll('tbody tr'))
|
||||||
.sort(comparer(thIndex, isAscending))
|
.sort(comparer(thIndex, isAscending))
|
||||||
.forEach(tr => table.appendChild(tr));
|
.forEach(tr => table.querySelector('tbody').appendChild(tr));
|
||||||
}));
|
}));
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@endsection
|
@endsection
|
Loading…
Reference in New Issue