Fixed sorting function for table

Author: JulianPrieber

resources/views/panel/users.blade.php

@@ -170,50 +170,53 @@
     </div>
   </div>
 
-<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));
-
-// 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 table and its headers
+      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]');
+      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>
+    
 
 
 @endsection