Level 75
Jun 18, 2021
2
Level 5
Custom pagination not working with ajax
Hi all, I'm trying to apply ajax, so that the page is not refreshed when i press next,prev buttons, but the page is still reloading, i tried to manipulate the data in different ways but none worked for me, has anyone an idea of what's going wrong please ? Thanks
=in my TeamController
public function index(){
$members = Member::latest('id')->paginate(6);
return view('front.team.index',compact('members'));
}
function fetch_data(Request $request)
{
if($request->ajax())
{
$members = Member::latest('id')->paginate(6);
return view('front.team.table',compact('members'))>render();
}
}
=in index blade
@extends('front.layouts.front')
@section('content')
<!-- Team -->
<div id="table">
@include('front.team.table')
</div>
<!-- End Team -->
<script>
$(document).ready(function(){
$(document).on('click', '.pager a', function(event){
event.preventDefault();
var page = $(this).attr('href').split('content=')[1];
fetch_data(page);
});
function fetch_data(page)
{
$.ajax({
url:"/team/members?page="+page,
success:function(data)
{
$('#table').html(data);
}
});
}
});
</script>
@endsection
=in table blade
@extends('front.layouts.front')
@section('content')
<!-- Team -->
<section class="team-area ptb-100">
<div class="container">
<div class="row">
@if($members && $members-> count() > 0)
@foreach ($members as $member )
<div class="col-sm-6 col-lg-4">
<div class="team-item">
<div class="top">
<img src="{{ $member->photo }}" alt="Team">
<ul>
<li>
<a href="#" target="_blank">
<i class="icofont-facebook"></i>
</a>
</li>
<li>
<a href="#" target="_blank">
<i class="icofont-twitter"></i>
</a>
</li>
<li>
<a href="#" target="_blank">
<i class="icofont-youtube-play"></i>
</a>
</li>
<li>
<a href="#" target="_blank">
<i class="icofont-instagram"></i>
</a>
</li>
</ul>
</div>
<div class="bottom">
<h3>{{ $member->name }}</h3>
<span>{{ $member->role }}</span>
</div>
</div>
</div>
@endforeach
@endif
</div>
<div class="pagination-area">
<ul>
{{ $members->links('vendor.pagination.custom') }}
</ul>
</div>
</div>
</section>
<!-- End Team -->
@endsection
= in custome blade under vendor/pagination folder which replaces the default pagaination
@if ($paginator->hasPages())
<ul class="pager">
@if ($paginator->onFirstPage())
<li class="disabled"><span>← Previous</span></li>
@else
<li><a class="content" href="{{ $paginator->previousPageUrl() }}" rel="prev">← Previous</a></li>
@endif
@foreach ($elements as $element)
@if (is_string($element))
<li class="disabled"><span>{{ $element }}</span></li>
@endif
@if (is_array($element))
@foreach ($element as $page => $url)
@if ($page == $paginator->currentPage())
<li class="active my-active"><span>{{ $page }}</span></li>
@else
<li><a class="content" href="{{ $url }}">{{ $page }}</a></li>
@endif
@endforeach
@endif
@endforeach
@if ($paginator->hasMorePages())
<li><a class="content" href="{{ $paginator->nextPageUrl() }}" rel="next">Next →</a></li>
@else
<li class="disabled"><span>Next →</span></li>
@endif
</ul>
@endif
=in route
//TEAM
Route::group(['prefix' => 'team'], function () { //About
Route::get('/', [App\Http\Controllers\Front\TeamController::class, 'index'])->name('home.team');
Route::get('/members', [App\Http\Controllers\Front\TeamController::class, 'fetch_data']);
});
Please or to participate in this conversation.