Laravel Ajax Пагинация ссылки refre sh на второй странице нажмите

Question

Я использую Laravel 5.8, и я пытаюсь сделать нумерацию страниц, используя AJAX, и это работает 50% времени. На самом деле, когда я нажимаю на страницу ссылок внизу, она отлично отображает данные, но моя проблема в том, что, когда я нажимаю вниз на пагинационную ссылку внизу, она обновляет страницу. Я не хочу, чтобы страница перезагружалась половину времени, когда я нажимаю на страницы нумерации страниц.

Вот мой код для этого:

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() !!}

Текущая ситуация: Вызывает перезагрузку страницы во второй раз, когда я нажимаю на ссылку нумерации страниц.

Что я хочу: Чтобы не перезагружать страницу, когда я нажимаю на ссылки нумерации страниц.

Что я имею попробовал: Я действительно следовал этому исходному коду: https://gist.github.com/tobysteward/6163902

Спасибо:)

Answer 1

Вы присоединяете метод щелчка к .pagination a, как только документ готов, однако, если вы создаете новый элемент с тем же классом, он не будет иметь такую ​​же функциональность. Для этого вам нужно заставить скрипт проверять document динамически. Пожалуйста, смотрите ниже пример.

 $(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);
  });