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

Ajax Pagination下一个和上一个按钮效果不佳

1 个答案: