shiyang/yii2-infinite-scroll

Yii2 extension for infinite-scroll jQuery plugin

yii2-infinite-scroll

Yii2 extension for infinite-scroll jQuery plugin, providing scrolling functionality for widgets such as ListView. It renders a hyperlink that leads to subsequent page of a target and registers infinite-scroll jQuery plugin which uses javascript to fetch and append content for subsequent pages, gracefully degrading to complete page reload when javascript is disabled., _(*1)

Several behaviours allowing to customize scroll behavior are provided out of the box, including twitter-style manual trigger, local scroll in overflow div, masonry integration and others., _(*2)

Resources

• Yii2 extension page
• Infinite-Scroll jQuery plugin documentation

Installation

Composer

Add extension to your composer.json and update your dependencies as usual, e.g. by running composer update, _(*3)

{
    "require": {
        "shiyang/yii2-infinite-scroll": "*"
    }
}

Widget Configuration

In addition to most of the properties that LinkPager provides, this widget also allows you to configure:, _(*4)

• $widgetId string owner widget id, required
• $itemsCssClass string CSS class of a tag that encapsulates items, required
• $pluginOptions array infinite-scroll jQuery plugin options. For more information refer to infinite-scroll documentation
• $contentLoadedCallback string|JsExpression javascript callback to be executed on loading the content via ajax call

Sample Usage

Plugin works by appending fetched items to the end of parent container, so it is required to configure layout property of parent ListView widget, wrapping {items} into e.g. div container with some class (to be used as a selector). It is possible to configure all selectors that widget initializes plugin with to fit your project requirements, but it general it is enough to set itemCssClass (class of that wrapping tag that we created) and widgetId (which would ensure multiple plugins on the same page would not conflict)., _(*5)

So the minimal required configuration would look like this:, _(*6)

use shiyang\infinitescroll\InfiniteScrollPager;

echo ListView::widget([
    ...
    'id' => 'my-listview-id',
    'layout' => "{summary}\n

{items}

\n{pager}",
    'pager' => [
        'class' => InfiniteScrollPager::className(),
        'widgetId' => 'my-listview-id',
        'itemsCssClass' => 'items',
    ],
]);

An example illustrating how to customize some widget / plugin options:, _(*7)

use shiyang\infinitescroll\InfiniteScrollPager;

echo ListView::widget([
    ...
    'id' => 'my-listview-id',
    'layout' => "{summary}\n

{items}

\n{pager}",
    'pager' => [
        'class' => InfiniteScrollPager::className(),
        'widgetId' => 'my-listview-id',
        'itemsCssClass' => 'items',
        'contentLoadedCallback' => 'afterAjaxListViewUpdate',
        'nextPageLabel' => 'Load more items',
        'linkOptions' => [
            'class' => 'btn btn-lg btn-block',
        ],
        'pluginOptions' => [
            'loading' => [
                'msgText' => "<em>Loading next set of items...</em>",
                'finishedMsg' => "<em>No more items to load</em>",
            ],
            'behavior' => InfiniteScrollPager::BEHAVIOR_TWITTER,
        ],
    ],
]);

Or, _(*8)

Controller action:, _(*9)

function actionIndex()
{
    $query = Article::find()->where(['status' => 1]);
    $countQuery = clone $query;
    $pages = new Pagination(['totalCount' => $countQuery->count()]);
    $models = $query->offset($pages->offset)
        ->limit($pages->limit)
        ->all();

    return $this->render('index', [
        'models' => $models,
        'pages' => $pages,
    ]);
}

View:, _(*10)

use shiyang\infinitescroll\InfiniteScrollPager;









// display pagination
echo InfiniteScrollPager::widget([
    'pagination' => $pages,
    'widgetId' => '#content',
]);

License

Extension is released under MIT license, same as underlying jQuery plugin., _(*11)