Я новичок в Laravel. В своей таблице я применил поиск в реальном времени и по возрастанию и убыванию столбца с помощью Jquery. Я смотрю какое-то руководство по упорядочению по возрастанию и убыванию, но в этом видео он использует собственный PHP.
Я почти закончил, мой порядок убывания работает, но когда он теперь находится в порядке возрастания, у меня возникла проблема.
Когда я щелкну по столбцу «Имя», он будет отсортирован по убыванию, что является правильным, но когда я щелкну по нему еще раз, мой jquery не получит ответа
Вопрос: почему мой JQuery не работает, когда он находится в восходящем?
View
<!-- Will be used to replace the data-sort -->
<div class="table-responsive" id="staff_table">
<table class="table table-bordered table-hover" id="table">
<thead>
<tr>
<th>ID </th>
<th><a class="column_sort" data-user="staff" data-table="staff" data-sort="desc" id="name" href="#">Name</a> </th>
<th><a class="column_sort" data-user="staff" data-table="staff"data-sort="desc" id="username" href="#">Username</th>
<th><a class="column_sort" data-user="staff" data-table="staff"data-sort="desc" id="email" href="#">Email</th>
<th>Date Created</th>
<th>Time Created</th>
<th>Status</th>
</tr>
</thead>
<tbody>
@foreach($staffs as $staff)
<tr>
<td>{{ $staff->id }}</td>
<td>{{ $staff->name }}</td>
<td>{{ $staff->username }}</td>
<td>{{ $staff->email}}</td>
<td>{{ date('F m, o', strtotime($staff->created_at)) }}</td>
<td>{{ date('H:i A', strtotime($staff->created_at)) }}</td>
<td>{{ "TEMP" }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
Javascript
$(document).ready(function(){
$('.column_sort').on('click',function () {
var column_name = $(this).attr("id");
var sort = $(this).data("sort");
var user = $(this).data("user");
var table = $(this).data("table");
var arrow = "";
if(sort == 'desc')
{
arrow = '<i class="fas fa-sort-up style=float:right;"></i>'
}
else
{
arrow = '<i class="fas fa-sort-down style=float:right;"></i>'
}
$.ajax({
type : 'get',
url : '{{URL::to('sort')}}',
data:{'column_name':column_name,sort:sort,user:user,table:table},
success:function(data)
{
$('#staff_table').html(data);
$('#'+column_name+'').append(arrow);
},
});
// order = $(this).data("order","asc");
});
});
Контроллер
public function sort(Request $request)
{
if($request->ajax())
{
$output="";
$sort = $request->sort;
// Check the sort if it is desc or ascending
if($sort == "desc")
{
// True it will be sort by descending
$staffs = DB::table($request->table)
->orderBy($request->column_name, $request->sort)
->get();
// Then re-assign the $sort to ascending
$sort = "asc";
}
else
{
// True it will be sort by ascending
$staffs = DB::table($request->table)
->orderBy($request->column_name, $request->sort)
->get();
// Then re-assign the $sort to descending
$sort = "desc";
}
$output .='<table class="table table-bordered table-hover" id="table">'.
'<thead>'.
'<tr>'.
'<th>ID </th>'.
'<th><a class="column_sort" data-user="'.$request->user.'" data-table="'.$request->table.'" data-sort="'.$sort.'" id="name" href="#">Name</a> </th>'.
'<th><a class="column_sort" data-user="'.$request->user.'" data-table="'.$request->table.'"data-sort="'.$sort.'" id="username" href="#">Username</th>'.
'<th><a class="column_sort" data-user="'.$request->user.'" data-table="'.$request->table.'"data-sort="'.$sort.'" id="email" href="#">Email</th>'.
'<th>Date Created</th>'.
'<th>Time Created</th>'.
'<th>Status</th>'.
'</tr>'.
'</thead>';
foreach ($staffs as $key => $staff)
{
$output.='<tr>'.
'<td>'.$staff->id.'</td>'.
'<td>'.$staff->name.'</td>'.
'<td>'.$staff->username.'</td>'.
'<td>'.$staff->email.'</td>'.
'<td>'.date('F m, o', strtotime($staff->created_at)).'</td>'.
'<td>'.date('H:i A', strtotime($staff->created_at)).'</td>'.
'</tr>';
}
$output .='</table>';
return Response($output);
}
}