[英]How to implement pagination and live search using ajax in Laravel 8?
[英]Laravel 8 Pagination with Live Search using AJAX
我正在嘗試在 laravel 8 中使用 Ajax 進行實時搜索來實現分頁 我遇到了一個問題,當我在搜索后按下分頁時,它將對整個數據進行分頁並恢復為默認值
這是我的 AdminisitrationController
//pagination
public function pagination(Request $request)
{
$users = User::latest()->paginate(5);
$data['role'] = Role::all();
return view("Administration.pagination_userlist",$data, ['users'=>$users])->render();
}
//search
public function searchUser(Request $request)
{
$data['role'] = Role::all();
$users = User::where('name', 'like', '%'.$request->search_string.'%')
->orWhere('email', 'like', '%'.$request->search_string.'%')
->orderBy('id', 'desc')
->paginate(5);
if($request->ajax())
{
if($users->count() >= 1)
{
return view("Administration.pagination_userlist",$data, ['users'=>$users])-
>render();
}
else
{
return response()->json([
'status'=>'nothing_found',
]);
};
}
return view("Administration.userList",$data, ['users'=>$users])->render();
}
這是我的 Jquery 代碼 ajax
// Pagination
$(document).on('click','.pagination a', function (event) {
event.preventDefault();
let page = $(this).attr('href').split('page=')[1];
user(page);
});
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
function user(page){
$.ajax({
url: "pagination/paginate-data?page="+page,
success: function (response) {
$('.table-responsive').html(response);
},
});
}
//search
$(document).on('keyup', function (e) {
e.preventDefault();
let search_string = $('#search').val();
//console.log(search_string);
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type:"GET",
url: "{{ route("search.user")}}",
data: {search_string:search_string},
success: function (response) {
$('.table-responsive').html(response);
if (response.status =="nothing_found")
{
$('.table-responsive').html('<span class="text-danger">'+'Aucun
Résultat'+'</span>');
}
},
});
});
這是我的觀點:
<!-- Table -->
<div class="card">
<div class="card-header">
<div class="row">
<div class="col-lg-6">
<p class="text-muted mb-0">
<button type="button" data-toggle="modal" data-target="#AddUserModal"
class="btn btn-primary">
<i class="fa fa-user-plus"></i>
Ajouter un utilisateur
</button>
</p>
</div><!--end col-->
<div class="col-lg-6 text-right">
<div class="text-right">
<ul class="list-inline">
<li class="list-inline-item">
<form id="searchform" name="searchform">
<div class="input-group">
<input type="search" id="search" name="search"
class="form-control form-control-sm" placeholder="Search">
<span class="input-group-append">
<button type="button" class="btn btn-soft-primary
btn-sm"><i class="fas fa-search"></i></button>
</span>
</div>
</form>
</li>
<li class="list-inline-item">
<select name="role" id="role">
<option value="">Select role</option>
@foreach($role as $role)
<option value="{{$role->id}}">{{$role->name}}
</option>
@endforeach
</select>
</li>
<li class="list-inline-item">
<button type="button" class="btn btn-soft-primary btn-sm
dropdown-toggle" data-toggle="dropdown" aria-
haspopup="true"><i class="fas fa-filter"></i></button>
<div class="dropdown-menu" style="">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another
action</a>
<a class="dropdown-item" href="#">Something else
here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated
link</a>
</div>
</li>
</ul>
</div>
</div><!--end col-->
</div><!--end row-->
</div>
<div class="card-body">
<div id="success_message"></div>
<div class="table-responsive">
@include("Administration\pagination_userlist",["users"=>$users])
</div>
<span class="float-right">
<button id="but_add" class="btn btn-success btn-sm">Add New Row</button>
</span><!--end table-->
<!-- END Table -->
和我的 pagination_userlist
<table class="table mb-0" id="makeEditable">
<thead class="thead-light">
<tr>
<th>#</th>
<th>Nom</th>
<th>Email</th>
<th>Rôle </th>
<th name="buttons"></th></tr>
</thead>
<tbody>
@foreach($users as $key=>$user)
<tr>
<td>{{$user->id}}</td>
<td>{{$user->name}}</td>
<td>{{$user->email}}</td>
<td>{{$user->role->name}}</td>
<td name="buttons"><div class=" pull-right">
<button id="bEdit" type="button"
class="update_user btn btn-sm btn-soft-success btn-circle mr-2"
data-toggle="modal" data-target="#UpdateUserModal"
data-id="{{$user->id}}"
data-name="{{$user->name}}"
data-email="{{$user->email}}"
data-role_id="{{$user->role_id}}">
<i class="dripicons-pencil"></i>
</button>
<button id="bElim" type="button"
class="delete_user btn btn-sm btn-soft-danger btn-circle"
data-id="{{$user->id}}">
<i class="dripicons-trash" aria-hidden="true"></i>
</button></div>
</div></td>
</tr>
@endforeach
</tbody>
</table>
</br>
{{ $users->links() }}
And my routes:
Route::get('pagination/paginate-data', [AdministrationController::class, 'pagination'])-
>name('pagination');
Route::get('search-user', [AdministrationController::class, 'searchUser'])-
>name('search.user');
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.