devol
/
LinkStack
mirror of https://github.com/LinkStackOrg/LinkStack.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fixed sorting function for table

This commit is contained in:
Julian Prieber 2023-07-20 15:48:53 +02:00
parent 9be122198a
commit 4588ef9768
1 changed files with 47 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
resources/views/panel/users.blade.php
View File

@ -170,50 +170,53 @@
</div> </div>
</div> </div>
<script> <script>
const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent; const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;
const comparer = (idx, asc) => (a, b) => const comparer = (idx, asc) => (a, b) =>
((v1, v2) => ((v1, v2) =>
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));
// Find the table and its headers document.addEventListener('DOMContentLoaded', () => {
const table = document.querySelector('table'); // Find the table and its headers
const headers = table.querySelectorAll('th'); const table = document.querySelector('table');
const headers = table.querySelectorAll('th[data-sort]');
// Add caret icon to initial header element
const initialHeader = table.querySelector('[data-order]'); // Add caret icon to initial header element
initialHeader.innerHTML = `${initialHeader.innerText} <i class="bi bi-caret-down-fill"></i>`; 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
headers.forEach(th => th.addEventListener('click', function() { // Attach click event listener to all sortable headers
// Get the clicked header's index, sort order, and sortable attribute headers.forEach(th => th.addEventListener('click', function() {
const thIndex = Array.from(th.parentNode.children).indexOf(th); // Get the clicked header's index, sort order, and sortable attribute
const isAscending = this.asc = !this.asc; const thIndex = Array.from(th.parentNode.children).indexOf(th);
const isSortable = th.getAttribute('data-sortable') !== 'false'; const isAscending = this.asc = !this.asc;
const isSortable = th.getAttribute('data-sortable') !== 'false';
// If the column is not sortable, do nothing
if (!isSortable) { // If the column is not sortable, do nothing
return; if (!isSortable) {
} return;
}
// Remove caret icon and active class from all headers
headers.forEach(h => { // Remove caret icon and active class from all headers
h.classList.remove('active'); headers.forEach(h => {
h.innerHTML = h.innerText; h.classList.remove('active');
}); h.innerHTML = h.innerText;
});
// Add caret icon and active class to clicked header
th.classList.add('active'); // Add caret icon and active class to clicked header
th.innerHTML = `${th.innerText} ${isAscending ? '<i class="bi bi-caret-down-fill"></i>' : '<i class="bi bi-caret-up-fill"></i>'}`; th.classList.add('active');
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)')) // Sort the table rows based on the clicked header
.sort(comparer(thIndex, isAscending)) Array.from(table.querySelectorAll('tbody tr'))
.forEach(tr => table.appendChild(tr)); .sort(comparer(thIndex, isAscending))
})); .forEach(tr => table.querySelector('tbody').appendChild(tr));
</script> }));
});
</script>
@endsection @endsection