Zoul's avatar
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']);
});
0 likes
2 replies
Zoul's avatar
Level 5

Thanks a lot for your reply ! i tried to change some of my code according to the link you provided but it didn't work too, may be because i'm still beginner developper i could not make use of it :)

Please or to participate in this conversation.