171171 </div >
172172
173173 <script >
174- const getCellValue = (tr , idx ) => tr .children [idx].innerText || tr .children [idx].textContent ;
174+ document .addEventListener (' DOMContentLoaded' , function () {
175+ const getCellValue = (tr , idx ) => tr .children [idx].innerText || tr .children [idx].textContent ;
175176
176- const comparer = (idx , asc ) => (a , b ) =>
177- ((v1 , v2 ) =>
178- v1 !== ' ' && v2 !== ' ' && ! isNaN (v1) && ! isNaN (v2) ? v1 - v2 : v1 .toString ().localeCompare (v2)
179- )(getCellValue (asc ? a : b, idx), getCellValue (asc ? b : a, idx));
177+ const comparer = (idx , asc ) => (a , b ) =>
178+ ((v1 , v2 ) =>
179+ v1 !== ' ' && v2 !== ' ' && ! isNaN (v1) && ! isNaN (v2) ? v1 - v2 : v1 .toString ().localeCompare (v2)
180+ )(getCellValue (asc ? a : b, idx), getCellValue (asc ? b : a, idx));
180181
181- document .addEventListener (' DOMContentLoaded' , () => {
182182 // Find the table and its headers
183183 const table = document .querySelector (' table' );
184- const headers = table .querySelectorAll (' th[data-sort] ' );
184+ const headers = table .querySelectorAll (' th' );
185185
186186 // Add caret icon to initial header element
187187 const initialHeader = table .querySelector (' [data-order]' );
188188 initialHeader .innerHTML = ` ${ initialHeader .innerText } <i class =" bi bi-caret-down-fill" ></i >` ;
189189
190- // Attach click event listener to all sortable headers
190+ // Attach click event listener to all headers
191191 headers .forEach (th => th .addEventListener (' click' , function () {
192192 // Get the clicked header's index, sort order, and sortable attribute
193193 const thIndex = Array .from (th .parentNode .children ).indexOf (th);
210210 th .innerHTML = ` ${ th .innerText } ${ isAscending ? ' <i class="bi bi-caret-down-fill"></i>' : ' <i class="bi bi-caret-up-fill"></i>' } ` ;
211211
212212 // Sort the table rows based on the clicked header
213- Array .from (table .querySelectorAll (' tbody tr ' ))
213+ Array .from (table .querySelectorAll (' tr:nth-child(n+2) ' ))
214214 .sort (comparer (thIndex, isAscending))
215- .forEach (tr => table .querySelector ( ' tbody ' ). appendChild (tr));
215+ .forEach (tr => table .appendChild (tr));
216216 }));
217217 });
218- </script >
219-
218+ </script >
220219
221220
222221@endsection
0 commit comments