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.

{{ message }}

{{ 'Comments are closed.' | trans }}