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