Как вставить бесконечный свиток в Laravel Project

Question

Я очень плохо знаком с Jquery и Ajax, которые используются в laravel, и я пытаюсь реализовать бесконечную прокрутку в моем проекте, и я понятия не имею, с чего начать.

Контроллер:

$books= DB::table('books')->where('status', 'post')->orderBy('created_at', 'DESC')->paginate(15);

   if ($books->isEmpty())
   {
     $books= null;

     return view('landingpage')->withBooks($books);
   }
   return view('landingpage')->withBooks($books);

Вид

   @if ($books== null)

            <center><p class="paragraph"> Be the first to share your shopping experience <a href="{{ route('testimonials.create') }}" style="color:#9e0101;"> here</a></p></center>

        @else


        <div class="row mt-0"> <div class="infinite-scroll"> @foreach ($books as $item)
            <div class="col-lg-4 mt-3">
                <p class="paragraph"> <sup><i class="fa fa-quote-left" style="font-size:5px" aria-hidden="true"></i></sup>{{$item->title}}<sup><i class="fa fa-quote-right" style="font-size:5px" aria-hidden="true"></i></sup> </p>
                <img src="../images/{{$item->rate}}.png" style="width:50%" alt="Image">
            <h2 style="font-size:18px">{{$item->firstname}} {{$item->lastname}}</h2> </div>@endforeach </div>{{$books->links()}}</div>

                @endif

JS

<script type="text/javascript">
$('ul.pagination').hide();
$(function() {
    $('.infinite-scroll').jscroll({
        autoTrigger: true,
        loadingHtml: '<img class="center-block" src="images/loading.gif" alt="Loading..." />',
        padding: 0,
        nextSelector: '.pagination li.active + li a',
        contentSelector: 'div.infinite-scroll',
        callback: function() {
            $('ul.pagination').remove();
        }
    });
});

Любая помощь будет с благодарностью

Answer 1

Я использую Ajax для бесконечной прокрутки, это пример:

Метод для просмотра:

public function index(){
        return view('index');
    }

Метод получения данных через AJAX:

public function ajaxData(Request $request)
    {
        $post_query = Trends::query()
            ->where('is_offer', '!=', 1)
            ->where('direct_to', null)
            ->orderBy('id', 'desc')
            ->paginate(12);

        $data['post_list'] = $post_query;


            if ($data['post_list']->count() > 0) {            
                $ajax_data['post'] = true;
                $ajax_data['next_url'] = $data['post_list']->nextPageUrl();
                $ajax_data['next_data'] = $data['post_list'];

            } else {
                $ajax_data['html'] = false;
                $ajax_data['post'] = false;
                $ajax_data['next_url'] = $data['post_list']->nextPageUrl();
            }
            return response()->json($ajax_data);
    }

И это мой сценарий в лезвии

var loaddataUrl = '{!! route('explore-ajax-data',array_merge(request()->all())) !!}';
        var nextData = true;
        $(document.body).on('touchmove', onExploreScroll); // for mobile
        $(window).on('scroll', onExploreScroll);

        function onExploreScroll() {
            if ($(window).scrollTop() >= ($(document).height() - $(window).height()) * 0.9) {
                if (nextData) {
                    nextData = false;
                    loadMoreData();
                }
            }
        }
        function loadMoreData() {
            $.ajax({
                type: 'GET',
                url: loaddataUrl,        

                success: function (data) {                        
                    if (data.next_url) {
                        loaddataUrl = data.next_url;
                        console.log(data.next_data);
                        nextData = true;
                    } else {
                        nextData = false;
                    }
                },
                error: function (data) {
                    nextData = true;
                }
            })
        }

route(explore-ajax-data) сопоставить с public function ajaxData(Request $request)

мои маршруты:

// this will display home page or home view
Route::get('home', 'HomeController@index')->name('home');

// this is for ajax request.
Route::get('ajax/explore-data', 'HomeController@ajaxData')->name('explore-ajax-data');

ссылка учебника