Javascript Laravel Ajax分页链接在第二页上刷新单击

我使用的是Laravel5.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'));
    }

$(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>

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

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

index.blade.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'));
    }

$(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>

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

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

当前情况：导致第二次单击分页链接时重新加载页面。

我想要的：单击分页链接时不要重新加载页面

我所尝试的：我实际上遵循了以下源代码：

---

谢谢：）

您正在将click方法附加到

。文档准备好后，分页将成为一个

，但是如果您使用相同的类创建一个新元素，将不会具有相同的功能。要实现这一点，您必须强制脚本动态地检查

文档

。请看下面的例子

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

---

在laravel中，如果您使用的是yajra datatable，请在下面添加函数

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

---

并调用reload_table（）而不是table.draw（），它不会创建整个表，只会重新加载

这是java脚本的行为。你必须像打电话一样打你的电话<代码>$（文档）。在（'click'，“.pagination a”上，函数（）{并将其放置在

$（文档）之外。就绪

块。它工作了！！棒极了。但我真的不明白为什么我不能将其放入

$（文档）。就绪

范围？