laravel，使用无限滚动代替分页

Question

我使用滚动而不是分页，但我的问题是它仍然加载甚至已经存在的数据并且没有找到更多数据，所以向下滚动永远不会停止，我认为因为我无法设置如果达到的条件最后一页然后停止加载以检查 json html 是否为空很难，因为它包含 html div 我希望你能帮助我到达内容的末尾然后停止滚动

          var page = 1;

            $(window).scroll(function() {
                if($(window).scrollTop() + $(window).height() >= $(document).height()) {
                    page++;
                    loadMoreData(page);
                }
            });

            function loadMoreData(page) {
                $.ajax({
                    url: '?page=' + page,
                    type: "get",
                    beforeSend: function() {
                        $('.ajax-load').show();
                    }
                }).done(function(data) {


                    if(page == " ") {
                        $('.ajax-load').html("No more records found");
                        return;
                    }
                    $('.ajax-load').hide();
                    $("#load_data").append(data.html);

                }).fail(function(jqXHR, ajaxOptions, thrownError) {
                    alert('server not responding...');
                });
            }


             /*Show Hide Cousines*/
                $('#showcuisine').on('click', function (event) {
                    event.preventDefault();
                    $(".cuisines").show();
                    $("#showcuisine").hide();
                    $("#hidecuisine").show();
                });


                $('#hidecuisine').on('click', function (event) {
                    event.preventDefault();
                    var allcuisines = jQuery('.cuisines');
                    for (var i = 5; i < allcuisines.length; i++) {
                        $('#cuisine' + i).hide();

                    }

                    $("#showcuisine").show();
                    $("#hidecuisine").hide();

                });

Controller

if ($request->ajax()) {
            $view = view('store-search.listing', compact(
                'stores','storedays','cuisines'
        ))->render();

            return response()->json(['html'=>$view]);
        }

Answer 1

当没有更多数据要接收时，您可以返回 null 或 false 而不是查看。

然后更换

if(page == " ") {
    $('.ajax-load').html("No more records found");
    return;
}

和：

if(!data) {
    $('.ajax-load').html("No more records found");
    return;
}

您还应该包含一个变量isLastPageLoaded = false并在到达最后一页时将其设置为true 。 在发出新的 AJAX 请求之前，您应该检查这是否仍然是错误的。 如果是真的，那么您不需要加载新记录。

我是否正确理解已经存在的记录会重复？

Answer 2

检查 api 侧的 if 条件是否获取零记录，然后返回 null。

然后把它放在你的 ajax 上完成 function

if(data == null) { $('.ajax-load').html("No more records found"); return; }

Answer 3

已解决，我必须将 foreach 放在一个没有其他 html 的 div 中直到 foreach