<@&987246584574140416> please have a look, thanks.
#Help sorting tables using spring/Thymeleaf
pearl onyxBOT
minor badger
This would probably be an easy task for ChatGPT. You don't have any specific question we can answer except giving you a solution to your problem instead of teaching you something. So I would suggest you trying your JS solutions again and come back with the issues you are having.
It's also possible to do this on the BE side but this would require a reload of the page which seems a bit ugly and isn't as fluent UX wise as doing it in JS
fossil lotus
<table>
<thead>
<tr>
<th onclick="sortTable(0)">Lease detaljer</th>
<th onclick="sortTable(1)">Vehicle Id</th>
<th onclick="sortTable(2)">Customer Id</th>
<th onclick="sortTable(3)">Lease Type</th>
<th onclick="sortTable(4)">Lease Price</th>
<th onclick="sortTable(5)">Lease Start Date</th>
<th onclick="sortTable(6)">Lease End Date</th>
<th onclick="sortTable(7)">Return Location</th>
<th onclick="sortTable(8)">Delete</th>
</tr>
</thead>
<tbody>
<tr th:each= "leaseAgreement: ${leaseAgreements}" th:if="${leaseAgreement.active}">
<td>
<form th:action="@{/leaseDetails}" method="get">
<input type="hidden" th:value="${leaseAgreement.leaseAgreementId}" name="lease_agreement_id">
<button type="submit"> Vis lease </button>
</form>
<td th:text="${leaseAgreement.fkVehicleId}" />
<td th:text="${leaseAgreement.getCustomer().getCustomerId()}" />
<td th:text="${leaseAgreement.leaseType}" />
<td th:text="${leaseAgreement.leasePrice}" />
<td th:text="${leaseAgreement.leaseStartDate}" />
<td th:text="${leaseAgreement.leaseEndDate}" />
<td th:text="${leaseAgreement.returnLocation}" />
<td>
<form th:action="@{/deleteLease}" method="post">
<input type="hidden" name="lease_agreement_id" th:value="${leaseAgreement.leaseAgreementId}">
<button type="submit">Delete</button>
</form>
</td>
</tr>
</tbody>
</table>```
This is the html prepped for jsDetected code, here are some useful tools:
fossil lotus
and this is the javascript I attempted
$(document).ready(function () {
// Cache the table selector
const tableSelector = $('#tableSelector');
// Initially hide all tables
$('.dataTable').hide();
// Show and initialize the default table
let tableId = tableSelector.val();
$('#' + tableId).show();
// On table selection change
tableSelector.on('change', function () {
tableId = $(this).val();
// Hide all tables
$('.dataTable').hide();
// Show the selected table
$('#' + tableId).show();
});
function sortTable(n) {
let table, rows, switching, i, x, y, shouldSwitch, dir, switchCount = 0;
table = document.getElementById(`${tableId}`);
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;
}
}
}
}
});
Detected code, here are some useful tools:
fossil lotus
For one I'm probably not even getting the document info right for the sort function, but even when I tried it directly in the html script I couldn't get it to work
The js part before is because we have multiple tables, and a dropdown menu where you can select which table you want visible, so I tried to only get the current visible table
spiral vapor
I think the only thing you should rethink is the "third click, reset table to original order" because you're allowing the order to be changed whichever column header is clicked. So maybe just for user clarity either don't allow it or put some kind of reset button related to the whole table.
This is really two things on the javascript side only. Setting the event listeners for click events; and the sort function itself which takes a table element, the column index, and the sort order.
fossil lotus
The script above does what you mentioned, just switches back and forth, not reset
Or it's supposed to, as it doesn't work
spiral vapor
The top half looks like jquery.
heady hazel
There are a lot of ways to achieve this, but I don't get your approach. Why aren't you doing a backend call, since there might be other entries matching the sorting in your database?