Laravel Ajax Pagination links refresh on second page click

Question

I'm using Laravel 5.8 and I'm trying to make a pagination using AJAX and it's working 50% of the time. Actually, when I click on the links page at the bottoms, it renders the data perfectly, but my problem is that, the second time I press a pagination link at the bottom, it resfreshes the page. I don't want the page to reload half the time I click on pagination pages.

Here's my code for that:

ManagerController.php

public function index()
    {
        $users = User::paginate(30);

        if (Request::ajax()) {
            return Response::json(View::make('manager.usersTable', compact('users'))->render());
        }

        $user = User::find(Auth::user()->id);
        $leagues = League::all();
        $usersCount = DB::table('users')->count();
        return view('manager.index', compact('user', 'leagues', 'users', 'usersCount'));
    }

index.blade.php

$(window).on('hashchange', function() {
            if (window.location.hash) {
                var page = window.location.hash.replace('#', '');
                if (page === Number.NaN || page <= 0) {
                    return false;
                }else{
                    getData(page);
                }
            }
        });

        $(document).ready(function() {

            $('.leagueModal').on('shown.bs.modal', function (event) {
                var href = $(this).find('#href_link').val();
                $(this).find('#leagueModalBtn').click(function() {
                    window.location.href = href;
                });
            });

            $('.pagination a').on('click', function (e) {
                e.preventDefault();

                $('li').removeClass('active');
                $(this).parent('li').addClass('active');

                var page = $(this).attr('href').split('page=')[1];

                getUsers(page);
            });
        });

        function getUsers(page) {
            $.ajax({
                url : '?page=' + page,
                type: 'GET',
                dataType: 'json',
            }).done(function (data) {
                $('.usersTable').empty().html(data);
                location.hash = page;
            }).fail(function () {
                console.log('Users could not be loaded.');
            });
        }



......... Down below is where I put my data .........

<div class="row">
            <h3>Utilisateurs ({{ $usersCount }})</h3>
        </div>
        <div class="row">
            <div class="usersTable" style="width: 100%">
                @include('manager.usersTable')
            </div>
        </div>

usersTable.blade.php

Whatever there is in this file is not really important but I got this at the end of it:

{!! $users->render() !!}

Current situation: Causes a page reload on the second time I click on a pagination link.

What I want: To not reload the page when I click on pagination links.

What I've tried: I actually followed this source code: https://gist.github.com/tobysteward/6163902

Thanks :)

Answer 1

In laravel if you are using yajra datatable add below function

 function reload_table(){
    table.ajax.reload(null,false);
    }   

and call reload_table() instead table.draw() it will not create whole table but only reload

Answer 2

You are attaching click method to .pagination a once document is ready, however if you create a new element with same class will not have same functionality. To achieve this you have to force script to check document dynamically. Please see below example.

 $(document).on('click', ".pagination a", function() {
            e.preventDefault();

            $('li').removeClass('active');
            $(this).parent('li').addClass('active');

            var page = $(this).attr('href').split('page=')[1];

            getUsers(page);
  });