May 18, 2024
0
Level 1
Duplicate Javascript not working on other table | Laravel 11.xx
Hi, I'm having a tough time with getting JS to behave. I'm not really good with JS and frankly I told GPT to write this for me and modified it slightly to make it work on my tables.
The 2 functions are sorting algo's that makes a table sort in ascending or descending order, and are basically duplicates based off of each other but for some reason the id="tableUser" one works, but the other one, id="tableAll", does not.
I'm plucking my hair out because it is for an assignment due tomorrow. Pls halp.
HTML + JS for id="tableUser", the one that works:
JS
function sortTableUser(n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("tableUser");
switching = true;
//Set the sorting direction to ascending:
dir = "asc";
/*Make a loop that will continue until
no switching has been done:*/
while (switching) {
//start by saying: no switching is done:
switching = false;
rows = table.rows;
/*Loop through all table rows (except the
first, which contains table headers):*/
for (i = 1; i < (rows.length - 1); i++) {
//start by saying there should be no switching:
shouldSwitch = false;
/*Get the two elements you want to compare,
one from current row and one from the next:*/
x = rows[i].getElementsByTagName("TD")[n];
y = rows[i + 1].getElementsByTagName("TD")[n];
/*check if the two rows should switch place,
based on the direction, asc or desc:*/
if (dir == "asc") {
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
//if so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
} else if (dir == "desc") {
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
//if so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
}
}
if (shouldSwitch) {
/*If a switch has been marked, make the switch
and mark that a switch has been done:*/
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
//Each time a switch is done, increase this count by 1:
switchcount++;
} else {
/*If no switching has been done AND the direction is "asc",
set the direction to "desc" and run the while loop again.*/
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
}
HTML
<div style="overflow-x:auto;">
<table class="table table-hover" id="tableUser">
<thead>
<tr>
<th onclick="sortTableUser(0)"><strong>Aangemaakt</strong></th>
<th onclick="sortTableUser(1)"><strong>Geslacht</strong></th>
<th onclick="sortTableUser(2)"><strong>Soort</strong></th>
<th onclick="sortTableUser(3)"><strong>Vangplaats</strong></th>
<th onclick="sortTableUser(4)"><strong>AS</strong></th>
<th onclick="sortTableUser(5)"><strong>KV</strong></th>
<th onclick="sortTableUser(6)"><strong>Notitie</strong></th>
<th onclick="sortTableUser(7)"><strong>Ondersoort</strong></th>
<th onclick="sortTableUser(8)"><strong>M/V</strong></th>
<th onclick="sortTableUser(9)"><strong>Aantal</strong></th>
<th onclick="sortTableUser(10)"><strong>Groep</strong></th>
<th onclick="sortTableUser(11)"><strong>Jongen</strong></th>
<th><strong>Delete</strong></th>
</tr>
</thead>
@foreach ($registraties as $registratie)
<tr>
<td>{{ $registratie->created_at->format('j-n-Y') }}</td>
<td>{{ $registratie->geslachtsnaam }}</td>
<td>{{ $registratie->soortnaam }}</td>
<td>{{ $registratie->vangplaats }}</td>
<td>{{ $registratie->AS }}</td>
<td>{{ $registratie->KV }}</td>
<td>{{ $registratie->notitie }}</td>
<td>{{ $registratie->ondersoort }}</td>
<td>{{ $registratie->mv }}</td>
<td>{{ $registratie->aantal }}</td>
<td>{{ $registratie->groep }}</td>
<td>{{ $registratie->jongen }}</td>
@can('delete', $registratie)
<td style="text-align:center; vertical-align:middle">
<form class="delete-post-form d-inline" action="/registratie/{{ $registratie->id }}" method="POST">
@csrf
@method('DELETE')
<button class="delete-post-button text-danger" data-toggle="tooltip" data-placement="top" title="Verwijderen"><i style="color:red" class="fas fa-trash"></i></button>
</form>
</td>
@endcan
</tr>
@endforeach
{{ $registraties->links() }}
</table>
</div>
HTML + JS for id="tableAll", the one that does NOT work:
JS
function sortTableAll(n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("tableAll");
switching = true;
//Set the sorting direction to ascending:
dir = "asc";
/*Make a loop that will continue until
no switching has been done:*/
while (switching) {
//start by saying: no switching is done:
switching = false;
rows = table.rows;
/*Loop through all table rows (except the
first, which contains table headers):*/
for (i = 1; i < (rows.length - 1); i++) {
//start by saying there should be no switching:
shouldSwitch = false;
/*Get the two elements you want to compare,
one from current row and one from the next:*/
x = rows[i].getElementsByTagName("TD")[n];
y = rows[i + 1].getElementsByTagName("TD")[n];
/*check if the two rows should switch place,
based on the direction, asc or desc:*/
if (dir == "asc") {
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
//if so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
} else if (dir == "desc") {
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
//if so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
}
}
if (shouldSwitch) {
/*If a switch has been marked, make the switch
and mark that a switch has been done:*/
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
//Each time a switch is done, increase this count by 1:
switchcount++;
} else {
/*If no switching has been done AND the direction is "asc",
set the direction to "desc" and run the while loop again.*/
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
}
HTML
<div style="overflow-x:auto;">
<table class="table table-hover" id="tableAll">
<thead>
<tr>
<th onclick="sortTableAll(0)"><strong>Lidnummer</strong></th>
<th onclick="sortTableAll(1)"><strong>Geslacht</strong></th>
<th onclick="sortTableAll(2)"><strong>Soort</strong></th>
<th onclick="sortTableAll(3)"><strong>Vangplaats</strong></th>
<th onclick="sortTableAll(4)"><strong>AS</strong></th>
<th onclick="sortTableAll(5)"><strong>KV</strong></th>
<th onclick="sortTableAll(6)"><strong>Notitie</strong></th>
<th onclick="sortTableAll(7)"><strong>Ondersoort</strong></th>
<th onclick="sortTableAll(8)"><strong>M/V</strong></th>
<th onclick="sortTableAll(9)"><strong>Aantal</strong></th>
<th onclick="sortTableAll(10)"><strong>Groep</strong></th>
<th onclick="sortTableAll(11)"><strong>Jongen</strong></th>
</tr>
</thead>
<tr>
@foreach ($registraties as $registratie)
<tr>
<td> @if ($registratie->gebruiker)<a href="mailto:{{ $registratie->gebruiker->email }}">{{ $registratie->gebruiker->lidnummer }}</a>@endif</td>
<td>{{ $registratie->geslachtsnaam }}</td>
<td>{{ $registratie->soortnaam }}</td>
<td>{{ $registratie->vangplaats }}</td>
<td>{{ $registratie->AS }}</td>
<td>{{ $registratie->KV }}</td>
<td>{{ $registratie->notitie }}</td>
<td>{{ $registratie->ondersoort }}</td>
<td>{{ $registratie->mv }}</td>
<td>{{ $registratie->aantal }}</td>
<td>{{ $registratie->groep }}</td>
<td>{{ $registratie->jongen }}</td>
</tr>
@endforeach
{{ $registraties->links() }}
</tr>
</table>
</div>
Thank you SO MUCH in advance.
Please or to participate in this conversation.