Бесконечная прокрутка страницы в Laravel

Бесконечная прокрутка — альтернатива пагинации. Для её реализации я выбрал плагин jScroll. Его можно скачать на одноименном сайте, добавив точку и «com» в строке браузера. Необходима библиотека JQuery.

Основные шаги.
Шаг 1. Подключаем плагин.

<script src="{{ URL::asset('admin/dist/js/jquery.jscroll.js') }}"></script>

Понятное дело, что путь к плагину, скорее всего, у вас будет другой.

Шаг 2. Допустим мы выводим записи на странице. Для этого делаем выборку этих записей, я делаю с сортировкой. Пагинация здесь нужна для того, чтобы а) загрузить первые n-количество записей б) загружать n-количество записей каждый раз, когда прокрутка достигнет последней записи. Я выбираю 10 записей, они загрузятся сразу на страницу, и по 10 будут загружаться при прокрутке вниз.

$posts = Post::orderBy('created_at', 'desc')->paginate(10);

Шаг 3. Выводим записи в шаблоне.

<div class="infinite-scroll">
@foreach($posts as $post)
...
@endforeach
{{ $posts->links()}}
</div>

Главная деталь здесь — скрытая пагинация. Ниже конструкции foreach размещаем блок пагинации строкой {{ $posts->links()}}, а саму HTML конструкцию пагинации надо скрыть, т.к вместо пагинации прокручивать страницы будет плагин JScroll. Панель пагинации скрывается CSS кодом «display:none», либо еще как. Конструкция foreach и пагинация должны быть в конструкции блока с классом infinite-scroll, где прокруткой будет орудовать наш плагин.

Шаг 4. Последний. Код для плагина JScroll.

Здесь указывается — loadingHtml: что будет выводится при загрузке записей, обычно это прелоадер; nextSelector: здесь плагин перебирает страницы пагинации которую мы скрыли; contentSelector: указываем в каком блоке находится пагинация.

$(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 () {
                }
            });
        });