我是Laravel新手。在我的表中,我使用Jquery应用了实时搜索以及列的升序和降序。我正在看一些教程如何进行升序和降序,但是在此视频中,他正在使用本机PHP。
我快要完成了,我的降序工作正常,但是现在升序却有问题。
当我单击“名称”列时,将按降序排序,这是正确的,但是当我再次单击它时,我的jquery将没有任何响应
问题:为什么我的JQuery升序时不起作用?
查看
<!-- 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);
}
}