从laravel数据库中排序数据

Question

你好，我有应用程序显示数据从mysql数据库表。App是用Laravel制作的。我想通过单击列名对这些数据进行排序。我试图这样做与javascript，但它不工作。功能有问题吗?

这是我的表显示从mysql

<p><button onclick="sortTable()">Posortuj</button></p>
<table classname="sorting">
<thead>
<tr>
<th>Name</th>
<th>Example</th>
<th>Test</th>
<th>Date</th>
<th>Number</th>
</tr>
</thead>
<tbody>
@foreach ($get_all_examples as $post)
<tr>
@php
$user_id = Auth::user()->getAuthIdentifier();
$cek_tiket = DB::table('test')

->where('date', '!=', null)
->where('numbery', '=', $post->name)
->where('user_id', '=', $user_id)
->count()

@endphp
<td>{{ $post->name?? "brak" }} </td>
<td>{{ $post->example ?? "brak" }}</td>
<td>{{ $post->number ?? "brak" }}</td>
<td>{{ $post->date ?? "brak" }}</td>
<td><h3>{{$cek_tiket}}</h3></td>
</tr>
@endforeach
</tbody>
</table>

这是我的js代码，我想排序我的表:

<script>
function sortTable(n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementsByClassName("sorting");
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;
}
}
}
}
</script>

Answer 1

首先在你的html中，将<table classname="sorting">更改为<table class="sorting">，然后在javascript中将table = document.getElementsByClassName("sorting");更改为table = document.getElementsByClassName("sorting")[0];，然后它将工作。