时间戳

首页 > 解决方案 > Laravel Ajax 分页链接在第二页单击时刷新

javascript - Laravel Ajax 分页链接在第二页单击时刷新

问题描述

我正在使用 Laravel 5.8，我正在尝试使用 AJAX 进行分页，它的工作时间为 50%。实际上，当我点击底部的链接页面时，它可以完美地呈现数据，但我的问题是，我第二次按下底部的分页链接时，它会重新刷新页面。我不希望页面在我点击分页页面的一半时间重新加载。

这是我的代码：

管理控制器.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

谢谢 ：）

标签： javascriptphpjqueryhtmllaravel

解决方案

一旦文档准备好，您将附加单击方法.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);
  });

推荐阅读