Level 3
Jun 15, 2022
3
Level 1
Pagination using ajax to prevent page reload in laravel 8
I am using an ajax code which I have copied from internet to paginate through my table result in my laravel project, it works fine on normal table, but when I am applying the same code for search result inside table it works until I search something and it shows me the number of pages , but as soon as I click on the pages to see the result it takes me back to normal paginated pages without query result and all the pages appear again. Below I have copied some of the codes including route. Can anyone please help me with this? because it is the last thing remained in my project. gn_ajxsrch. blade.pho
<div id="search">
<div class="col-md-9">
<form method="GET" action="{{ route('sm_search') }}" id="searchform" name="searchform">
<div class="input-group">
<input type="text" name="search" placeholder="گەران بەجۆرەی ناو یان كۆدی پرۆژە" class="form-control" />
@csrf
<span class="input-group-btn">
<button type="submit" class=" btn btn-secondary" id='search_btn'> گەران</button>
</span></div>
</form></div>
</div>
<div id="pagination_data">
@include('new',['projs'=>$projs])
</div>
<script>
$(function() {
$(document).on("click","#pagination a,#search_btn",function(){
//get url and make final url for ajax
var url=$(this).attr("href");
var append=url.indexOf("?")==-1?"?":"&";
var finalURL=url+append+$("#searchform").serialize();
//set to current url
window.history.pushState({},null, finalURL);
$.get(finalURL,function(data){
$("#pagination_data").html(data);
});
return false;
})
});
</script>
Controller function
function searchData(Request $request){
$user=Auth::user()->name;
$search = $request->search;
if ($user=='بەرێوەبەر'){
$projs = Project::orderBy('id','asc')
->where('Pmid','LIKE',"%{$search}%")
->orwhere('P_name','LIKE',"%{$search}%")
->orwhere('id','LIKE',"%{$search}%")
->orwhere('mnsry','LIKE',"%{$search}%")->paginate(2);
if ($request->ajax()) {
return view('new', ['projs'=>$projs]);
}
return view('gn_ajxsrch',['projs'=>$projs]);
// return view('new',['projs'=>$projs]);
}
else{
$projs = Project::where('mnsry','=',$user)->where(function($q) use ($search)
{
$q->where('Pmid','LIKE',"%{$search}%")
->orwhere('P_name','LIKE',"%{$search}%");
}
)->paginate(10);
return view('new', compact('projs'));
}
}
new.blade.php
@extends('master')
@section('content')
@if (session()->has('success'))
<h1 style='color:#413839; font-size: 22px'>{{ session('success') }}</h1>
@endif
<body >
<div>
</div><br>
<div class="container">
<!-- main app container -->
<div class="readersack">
<div class="container">
<div class="row">
<div class="row">
<a href="{{ url('add')}}">
<p style="text-decoration: underline;">
پرۆژەی نوێ
</p>
</a>
</div>
<div id="search">
<div class="col-md-9">
<form method="GET" action="{{ route('sm_search') }}" id="searchform" name="searchform">
<div class="input-group">
<input type="text" name="search" placeholder="گەران بەجۆرەی ناو یان كۆدی پرۆژە" class="form-control" />
@csrf
<span class="input-group-btn">
<button type="submit" class=" btn btn-secondary" id='search_btn'> گەران</button>
</span></div>
</form></div>
</div>
</div>
<br>
<div id="pagination">
{{ $projs->withQueryString()->links('layouts.paginationlinks') }}
</div>
<div style="height: 600px; width: 1000px; overflow: scroll; align=center;">
<table class="table table-hover table-light" >
<thead style=" width: auto; font-size: 12px;font-weight: bold; text-align: center;">
<tr class="table table-secondary" >
<td ># </td>
<td >كۆدی پرۆژە </td>
<td >وەزارەت</td>
<td >پارێزگا</td>
<td >ناوی پرۆژە</td>
<td >بەلێندەر </td>
<td >لایەنی تەمویل</td>
<td >بودجەی تەرخانكراو </td>
<td >بەرواری دەست بەكاربوون </td>
<td >بەرواری تەواوبوون بەپێ گرێبەست </td>
<td >سرینەوە</td>
<td >نوێكردن</td>
<td >گۆرانكاری</td>
<td> راپۆرتەكان</td>
</tr>
</thead>
@foreach ($projs as $proj)
<tr style="font-size: 12px;text-align: center">
<td >{{$proj->id}}</td>
<td >{{$proj->Pmid}}</td>
<td >{{$proj->mnsry}}</td>
<td >{{$proj->province}}</td>
<td >{{$proj->P_name}}</td>
<td >{{$proj->doer}}</td>
<td >{{$proj->tamwil}}</td>
<td >
<?php
$prc=$proj->Budget;
$fund=number_format($prc, 0, ',',',');
echo $fund,"<font color='red'>"."\r\n" ."دینار"."</font>";
?>
</td>
<td >{{$proj->start_date}}</td>
<td >{{ $proj->end_date }}</td>
<td >
<a class="btn btn-sm btn-danger" href={{"delete/".$proj['id']}} onclick="return confirm('Are you sure?')">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16">
<path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/>
</svg> </td>
</a> </td>
<td>
<a class="btn btn-sm btn-warning " href="{{url('updateReport'). '/' .$proj['id']}}"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-fill" viewBox="0 0 16 16">
<path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z"/>
</svg></a> </td>
<td >
<a class="btn btn-sm btn-info " href="/new/{{$proj->id}}"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-ticket-detailed-fill" viewBox="0 0 16 16">
<path d="M0 4.5A1.5 1.5 0 0 1 1.5 3h13A1.5 1.5 0 0 1 16 4.5V6a.5.5 0 0 1-.5.5 1.5 1.5 0 0 0 0 3 .5.5 0 0 1 .5.5v1.5a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 11.5V10a.5.5 0 0 1 .5-.5 1.5 1.5 0 1 0 0-3A.5.5 0 0 1 0 6V4.5Zm4 1a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 0-1h-7a.5.5 0 0 0-.5.5Zm0 5a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 0-1h-7a.5.5 0 0 0-.5.5ZM4 8a1 1 0 0 0 1 1h6a1 1 0 1 0 0-2H5a1 1 0 0 0-1 1Z"/>
</svg></a></td>
<td > <a class="btn btn-sm btn-secondary "href="/new/{{ $proj->id }}/report"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-flag-fill" viewBox="0 0 16 16">
<path d="M14.778.085A.5.5 0 0 1 15 .5V8a.5.5 0 0 1-.314.464L14.5 8l.186.464-.003.001-.006.003-.023.009a12.435 12.435 0 0 1-.397.15c-.264.095-.631.223-1.047.35-.816.252-1.879.523-2.71.523-.847 0-1.548-.28-2.158-.525l-.028-.01C7.68 8.71 7.14 8.5 6.5 8.5c-.7 0-1.638.23-2.437.477A19.626 19.626 0 0 0 3 9.342V15.5a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 1 0v.282c.226-.079.496-.17.79-.26C4.606.272 5.67 0 6.5 0c.84 0 1.524.277 2.121.519l.043.018C9.286.788 9.828 1 10.5 1c.7 0 1.638-.23 2.437-.477a19.587 19.587 0 0 0 1.349-.476l.019-.007.004-.002h.001"/>
</svg></a> </td>
</tr>
@endforeach
</table>
</div>
</div></div></div></div>
<br>
Route
Route::get('ad_ajxsrch',[ProjectReportController::class,'show'])->name('adm_search');
I used this ajax library for it
and I tried once without extending the website header and it worked perfectly, but with extend ('master ') it doesn't work, I also tried with simple pagination call {{ $projs->links() }} and replacing library links but it is still not working.
Level 1
@folium I tried some exact examples including this one, the problem is it works for normal table but when I use it for the table with search input, it doesn’t give the result of search and as soon as I click on the pages all the pages appear again .
1 like
Level 75
@Aishan you need your search parameters in the URL. And use a get request for pagination.
Please or to participate in this conversation.