README

Yii2 Scroll Pager (Y2SP) turns your regular paginated page into an infinite scrolling page using AJAX.

Y2SP works with a Pagination object which specifies the totally number of pages and the current page number.

Pager is build with help of JQuery Infinite Ajax Scroll plugin.

Requirements

• Yii 2.0
• PHP 5.4

Installation

The preferred way to install this extension is through Composer.

Either run

php composer.phar require kop/yii2-scroll-pager "dev-master"

or add

"kop/yii2-scroll-pager": "dev-master"

to the require section of your composer.json file.

Usage

Just pass the ScrollPager class name to the ListView pager configuration. Make sure that items in your list have some classes that can be used as JavaScript selectors.

ListView

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

ListView (Advanced example)

Here you can see how you can use variable {{ias}} for events. In this example are added the new settings linkPager, linkPagerOptions and linkPagerWrapperTemplate.

echo ListView::widget([
     'options' => ['class' => 'list-view'],
     'dataProvider' => $listDataProvider,
     'itemOptions' => ['tag' => false],
     'itemView' => '_list_item',
     'summary' => '',
     'layout' => '{items}{pager}',
     'pager' => [
          'class' => \kop\y2sp\ScrollPager::className(),
          'item' => 'article',
          'next' => '.next a',
          'paginationSelector' => '.list-view .pagination',
          'triggerText' => Yii::t('app', 'Show more'),
          'triggerTemplate' => '<span class="reveal-btn">{text}</span>',
          'noneLeftText' => '',
          'noneLeftTemplate' => '',
          'spinnerSrc' => '',
          'spinnerTemplate' => '',
          'linkPager'     => [
               'prevPageCssClass' => 'btn-link prev',
               'nextPageCssClass' => 'btn-link next',
               'prevPageLabel' => '<span class="prev-page">prev</span>',
               'nextPageLabel' => '<span class="next-page">next</span>',
          ],
          'linkPagerOptions'     => [
               'class' => 'pagination',
          ],
          'linkPagerWrapperTemplate' => '<div class="button-news-more"><div class="wrapper"><div class="paging">{pager}</div></div></div>',
          'eventOnPageChange' => 'function() {{{ias}}.hidePagination();}',
          'eventOnReady' => 'function() {{{ias}}.restorePagination();}',
     ],
]);

GridView

echo GridView::widget([
     'dataProvider' => $dataProvider,
     'pager' => [
        'class' => \kop\y2sp\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>',
     ],
]);

Configuration

General Options

Extensions

Extension Options

Option name	Description	Default value
triggerText	Text of trigger the link.	Load more items
triggerTemplate	Allows you to override the trigger html template.	<div class="ias-trigger" style="text-align: center; cursor: pointer;"><a>{text}</a></div>
triggerOffset	The number of pages which should load automatically. After that the trigger is shown for every subsequent page. Example: if you set the offset to 2, the pages 2 and 3 (page 1 is always shown) would load automatically and for every subsequent page the user has to press the trigger to load it.	0
spinnerSrc	The src attribute of the spinner image.
spinnerTemplate	Allows you to override the spinner html template.	<div class="ias-spinner" style="text-align: center;"><img src="{src}"/></div>
noneLeftText	Text of the "nothing left" message.	You reached the end
noneLeftTemplate	Allows you to override the "nothing left" message html template.	<div class="ias-noneleft" style="text-align: center;">{text}</div>
historyPrev	The selector of the link element that links to the previous page. The href attribute of this element will be used to get the items from the previous page. Make sure there is only one element that matches the selector.	.previous
historyPrevText	Text of previous page trigger.	Load previous items
historyPrevTemplate	Allows you to override the previous trigger html template.	<div class="ias-trigger ias-trigger-prev" style="text-align: center; cursor: pointer;"><a>{text}</a></div>'
overflowContainer	A selector for div HTML element to use as an overflow container.	null

Plugin Events

Report

• Report any issues on the GitHub.

License

yii2-scroll-pager is released under the MIT License. See the bundled LICENSE.md for details.

Resources

• Project Page
• Packagist Package
• Source Code