Fixed sorting table

Bug was when beta mode is enabled

Author: JulianPrieber

resources/views/panel/users.blade.php

@@ -40,7 +40,7 @@
                         <a href="{{ url('') }}/admin/users/admin">Admin</a> 
 
                         <div class="row"><div class="table-responsive">
-                          <table class="table table-stripped">
+                          <table id="sortable" class="table table-stripped">
                             <thead>
                               <tr>
                                 <th id="cs" scope="col" data-sort="id" data-order="asc">{{__('messages.ID')}}</th>
@@ -171,52 +171,52 @@
   </div>
 
 @push('sidebar-scripts')
-  <script defer>
-    const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;
-    
-    const comparer = (idx, asc) => (a, b) =>
-      ((v1, v2) =>
-        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", function() {
-      // Find the table and its headers
-      const table = document.querySelector('table');
-      const headers = table.querySelectorAll('th');
-    
-      // 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
-      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);
-        const isAscending = this.asc = !this.asc;
-        const isSortable = th.getAttribute('data-sortable') !== 'false';
-    
-        // If the column is not sortable, do nothing
-        if (!isSortable) {
-          return;
-        }
-    
-        // Remove caret icon and active class from all headers
-        headers.forEach(h => {
-          h.classList.remove('active');
-          h.innerHTML = h.innerText;
-        });
-    
-        // Add caret icon and active class to clicked header
-        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(comparer(thIndex, isAscending))
-          .forEach(tr => table.appendChild(tr));
-      }));
-    });
-    </script>    
+<script>
+  const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;
+
+  const comparer = (idx, asc) => (a, b) =>
+    ((v1, v2) =>
+      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 sortable table and its headers
+    const table = document.querySelector('#sortable.table.table-stripped');
+    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 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);
+      const isAscending = this.asc = !this.asc;
+      const isSortable = th.getAttribute('data-sortable') !== 'false';
+
+      // If the column is not sortable, do nothing
+      if (!isSortable) {
+        return;
+      }
+
+      // Remove caret icon and active class from all headers
+      headers.forEach(h => {
+        h.classList.remove('active');
+        h.innerHTML = h.innerText;
+      });
+
+      // Add caret icon and active class to clicked header
+      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('tbody tr'))
+        .sort(comparer(thIndex, isAscending))
+        .forEach(tr => table.querySelector('tbody').appendChild(tr));
+    }));
+  });
+</script>
 @endpush
 
 @endsection