Ajax загрузка данных в Yii2 ListView

Для реализации бесконечной прокрутки через провайдер данных можно воспользоваться расширением yii2-scroll-pager от kop, основанный на плагине JQuery Infinite Ajax Scroll.

Расширение работает с ListView и GridView.

<?= ListView::widget([
     'dataProvider' => $dataProvider,
     'itemOptions' => ['class' => 'item'],
     'itemView' => '_item_view',
     'pager' => ['class' => \kop\y2sp\ScrollPager::className()]
]);
?>

Свойство itemView указывает на повторяемый блок(например, пост в блоге), в itemOptions свойство class устанавливает класс для повторяемого блока. В случае если это свойство состоит из нескольких классов (например: col-xs-4 col-sm-4 col-md-3 views-row), можно прибегнуть к следующему коду:

<?= ListView::widget([
    'dataProvider' => $dataProvider,
    'itemOptions' => ['class' => ['col-xs-4 col-sm-4 col-md-3 views-row']],
    'itemView' => '_items',
    'pager' => [
        'class' => ScrollPager::className(),
        'item' => '.col-xs-4.col-sm-4.col-md-3.views-row'
    ]
]);
?>

Удобство в использовании расширения также добавляют события:

• eventOnScroll - срабатывает, когда посетители прокручивают;
• eventOnLoad - срабатывает, когда новый URL будет загружен с сервера;
• eventOnLoaded - срабатывает после загрузки новой страницы с сервера;
• eventOnRender - срабатывает до того, как новые объекты будут отрендерены;
• eventOnRendered - срабатывает после рендеринга новых предметов;
• eventOnNoneLeft - срабатывает, когда больше не осталось страниц для загрузки;
• eventOnNext - срабатывает, когда следующая страница должна быть загружена. Происходит до начала загрузки следующей страницы. С этим событием можно отменить загрузку следующей страницы;
• eventOnReady - срабатывает, когда IAS и все расширения были инициализированы;
• eventOnPageChange - срабатывает, когда используется прокрутка на другую страницу.

Стандартный спиннер при прокрутке задается через свойство spinnerSrc, однако спиннер можно задать и при помощи html и css, для этого:

1. Установим свойства для ScrollPager:

   'delay' => 2000,
   'spinnerTemplate' => '<div class="ias-spinner" style="display: hidden;"></div>',
   

2. Установим событие eventOnLoad для ScrollPager:

   'eventOnLoad' => "function() {
    $('.list-view').append('<div class=\"spinner\">Ваш спиннер</div>');
   }",
   

3. Установим событие eventOnRender для ScrollPager:

   'eventOnRender' => "function() {
    $('.spinner').remove();
   }",
   

Подгрузку новых страниц можно осуществлять автоматически, либо при нажатии кнопки, данное событие регулируется свойством triggerOffset.