Laravel Ajax 分页链接在第二页单击时刷新答案

【问题标题】：Laravel Ajax Pagination links refresh on second page clickLaravel Ajax 分页链接在第二页单击时刷新
【发布时间】：2020-04-09 06:43:58
【问题描述】：

我正在使用 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

谢谢:)

【问题讨论】：

这是 java 脚本行为。您必须像打击一样称呼您的分页。 $(document).on('click', ".pagination a", function() { 并将其放在 $(document).ready 块之外。

标签： javascript php jquery html laravel

【解决方案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);
  });

【讨论】：

成功了！！惊人的。但我真的不明白为什么我不能把它放在$(document).ready 范围内？

【解决方案2】：

如果你使用 yajra 数据表在 laravel 中添加下面的函数

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

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

【讨论】：