Yii2: Infinite scrolling with GridView and ListView

This is one combo that I use frequently in my Yii2 projects. When the page is scrolled to the end, next set of data is retrieved and displayed automatically without the need to click the pagination link and without waiting for the page to load. This improves user experience.

Note that if you have huge amount of data, you still have to wait during the initial page load. But with infinite scrolling navigation through the any pages is smoother.

I’ve tried a few plugins but I find yii2-scroll-pager works the best with GridView and ListView widgets. This replaces the pagination links at the bottom of the page (or depends where you set it on the widget’s template).

The extension is installed via composer, or download here.

Here are the coding templates I used with these 2 widgets.

First you’ll need to add to the view file:

use kop\y2sp\ScrollPager;

With GridView

<?= GridView::widget([
        'dataProvider'  => $dataProvider,
        'filterModel'   => $searchModel,
        'pjax'          => true,
        'summary'       => "<b>{totalCount, number}</b> {totalCount, plural, one{item} other{items}}.",
        'columns' => [
            'field1',
        ],
        'pager' => [
            'class'     => ScrollPager::className(),
            'container' => '.grid-view tbody',
            'item'      => 'tr',
            'paginationSelector' => '.grid-view .pagination',
            'triggerTemplate' => '<tr class="ias-trigger"><td colspan="100%" style="text-align: center"><a style="cursor: pointer">{text}</a></td></tr>',
            'enabledExtensions'  => [
                ScrollPager::EXTENSION_SPINNER,
                //ScrollPager::EXTENSION_NONE_LEFT,
                ScrollPager::EXTENSION_PAGING,
            ],
        ],
    ]) ?>

GridView with Editable Columns

I often use the GridView from Krajee which provides more features than the built-in GridView widget. One cool feature is Editable Column with allows inline editing within the grid.

This infinite extension does not work with inline editing. As each row is id by the row number. When retrieved next set of data, the row starts from 1. Inline editing will fail because of the id clash. I’ve seen this issue raised but the developer has no solution.

If you have small set of data, you can set the page size the same as result size, or use the pagers the original way.

If you have tried other infinite scroll extensions that work with this, please let me know in the comments.

With ListView

<?= ListView::widget([
    'dataProvider'  => $dataProvider,
    'summary'       => 'Total {totalCount} items.',
    'layout'        => "{items}\n<div class=\"row\"><div class=\"col-md-12\">\n{pager}</div></div>",
    'itemOptions'   => ['class' => 'item'],
    'itemView'      => '_item_view',
    'pager' => [
            'class'     => ScrollPager::className(),
                ScrollPager::EXTENSION_SPINNER,
                ScrollPager::EXTENSION_PAGING,
            ],
        ],
]) ?>

Leave a Reply

Your email address will not be published. Required fields are marked *