devol/LinkStack
1
0
Fork 0
mirror of https://github.com/LinkStackOrg/LinkStack.git synced 2025-03-27 08:50:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fixed sorting table

Browse Source 
Bug was when beta mode is enabled
This commit is contained in:
Julian Prieber 2023-07-22 16:34:16 +02:00
parent 98d16cc7fd
commit 4fc63f2a59
1 changed files with 47 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -40,7 +40,7 @@
<a href="{{ url('') }}/admin/users/admin">Admin</a> <a href="{{ url('') }}/admin/users/admin">Admin</a>
<div class="row"><div class="table-responsive"> <div class="row"><div class="table-responsive">
<table class="table table-stripped"> <table id="sortable" class="table table-stripped">
<thead> <thead>
<tr> <tr>
<th id="cs" scope="col" data-sort="id" data-order="asc">{{__('messages.ID')}}</th> <th id="cs" scope="col" data-sort="id" data-order="asc">{{__('messages.ID')}}</th>
@ -171,7 +171,7 @@
</div> </div>
@push('sidebar-scripts') @push('sidebar-scripts')
<script defer> <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) =>
@ -179,16 +179,16 @@
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", function() { document.addEventListener('DOMContentLoaded', () => {
// Find the table and its headers // Find the sortable table and its headers
const table = document.querySelector('table'); const table = document.querySelector('#sortable.table.table-stripped');
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);
@ -211,12 +211,12 @@
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>
@endpush @endpush
@endsection @endsection