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)
|
||||
)(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Find the table and its headers
|
||||
const table = document.querySelector('table');
|
||||
const headers = table.querySelectorAll('th');
|
||||
const headers = table.querySelectorAll('th[data-sort]');
|
||||
|
||||
// Add caret icon to initial header element
|
||||
const initialHeader = table.querySelector('[data-order]');
|
||||
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() {
|
||||
// Get the clicked header's index, sort order, and sortable attribute
|
||||
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>'}`;
|
||||
|
||||
// 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))
|
||||
.forEach(tr => table.appendChild(tr));
|
||||
.forEach(tr => table.querySelector('tbody').appendChild(tr));
|
||||
}));
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@endsection
|
Loading…
Reference in New Issue