Ajax 分页下一个和上一个按钮不能很好地工作

Question

我制作了自己的自定义分页视图。它运作良好。但是当我在分页中包含 ajax 代码时，它就坏了。 1-2-3-4- ... 按钮工作正常。 但我的主要问题：

下一页按钮正在将页面更改为第二页。

上一个按钮将页面更改为第一页。

当我停留在第二页时，无法使用下一步按钮跳转到第三页。

在我的控制器中：

$videos = Video::orderBy('id', 'desc')->paginate(7);

    if ($request->ajax()) {
        return view('frontend.videos.data', compact('videos'));
    }
        return view('frontend.videos', compact('videos'));

在视图中：

<div id="video-gallery" class="row mt-10px" style="width: 100%;margin: 0;">
        @include('frontend.videos.data')
    </div>

    {!! $videos->links('paginations.custom'); !!}

这是 ajax 代码：

    <script type="text/javascript">
    $(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()
    {
        $(document).on('click', '.pagination a',function(event)
        {
            $('li').removeClass('active');
            $(this).parent('li').addClass('active');
            event.preventDefault();


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


            getData(page);
        });
    });


    function getData(page){
        $.ajax(
            {
                url: '?page=' + page,
                type: "get",
                datatype: "html",
            })
            .done(function(data)
            {
                $("#video-gallery").empty().html(data);
                $videoLightGallery.data('lightGallery').destroy(true);
                $videoLightGallery.lightGallery();
                //location.hash = page;
            })
            .fail(function(jqXHR, ajaxOptions, thrownError)
            {
                alert('No Response From Server');
            });
    }
</script>
@endsection

我希望有人可以帮助我。提前致谢。

Answer 1

当您更新页面时，您还应该更新上一个和下一个按钮href 属性。它们是在服务器端呈现的，并且只会在新页面加载时包含正确的 href。

所以

$(window).on('hashchange', function() {
    // Update href tags.
    // Not giving everything away ;)
});