yii2-scroll-pager

Yii Framework Extensions

Createnew extension

Popular Tags

yii2-scroll-pager Turns your regular paginated page into an infinite scrolling page using AJAX

Yii2 Scroll Pager ¶

Requirements
Installation

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


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.


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


## Configuration

### General Options

#### `container`

*Default:* ".list-view"

Enter the selector of the element containing your items that you want to paginate.

#### `item`

*Default:* ".item"

Enter the selector of the element that each item has. Make sure the elements are inside the container element.

#### `delay`

*Default:* 600

Minimal number of milliseconds to stay in a loading state.

#### `negativeMargin`

*Default:* 10

On default IAS starts loading new items when you scroll to the latest .item element.
The negativeMargin will be added to the items' offset, giving you the ability to load new items earlier (please note that the margin is always transformed to a negative integer).

For example:

Setting a negativeMargin of 250 means that IAS will start loading 250 pixel before the last item has scrolled into view.

### Extensions

#### `enabledExtensions`

*Default:*
`
Array(
    ScrollPager::EXTENSION_TRIGGER,
    ScrollPager::EXTENSION_SPINNER,
    ScrollPager::EXTENSION_NONE_LEFT,
    ScrollPager::EXTENSION_PAGING,
    ScrollPager::EXTENSION_HISTORY
)
`

The list of the enabled plugin extensions.

### Extension Options

#### `triggerText`

*Default:* "Load more items"

Text of trigger the link.

#### `triggerTemplate`

*Default:* "`<div class="ias-trigger" style="text-align: center; cursor: pointer;"><a>{text}</a></div>`"

Allows you to override the trigger html template.

#### `triggerOffset`

*Default:* 0

The number of pages which should load automatically. After that the trigger is shown for every subsequent page.

For 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.

#### `spinnerSrc`

*Default:* ![Spinner Image](https://raw.githubusercontent.com/kop/yii2-scroll-pager/v1.0.2/assets/infinite-ajax-scroll/images/loader.gif)

The src attribute of the spinner image.

#### `spinnerTemplate`

*Default:* "`<div class="ias-spinner" style="text-align: center;"><img src="{src}"/></div>`"

Allows you to override the spinner html template.

#### `noneLeftText`

*Default:* "You reached the end"

Text of the "nothing left" message.

#### `noneLeftTemplate`

*Default:* "`<div class="ias-noneleft" style="text-align: center;">{text}</div>`"

Allows you to override the "nothing left" message html template.

#### `historyPrev`

*Default:* ".previous"

Enter 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.

#### `overflowContainer`

*Default:* null

A selector for `div` HTML element to use as an overflow container.

### Plugin Events

#### `eventOnScroll`

*Default:* null

Triggered when the visitors scrolls.

#### `eventOnLoad`

*Default:* null

Triggered when a new url will be loaded from the server.

#### `eventOnLoaded`

*Default:* null

Triggered after a new page was loaded from the server.

#### `eventOnRender`

*Default:* null

Triggered before new items will be rendered.

#### `eventOnRendered`

*Default:* null

Triggered after new items have rendered.

#### `eventOnNoneLeft`

*Default:* null

Triggered when there are no more pages left.

#### `eventOnNext`

*Default:* null

Triggered when the next page should be loaded.

Happens before loading of the next page starts. With this event it is possible to cancel the loading of the next page.

You can do this by returning false from your callback.

#### `eventOnReady`

*Default:* null

Triggered when IAS and all the extensions have been initialized.

#### `eventOnPageChange`

*Default:* null

Triggered when a used scroll to another page.


## Report

- Report any issues [on the GitHub](https://github.com/kop/yii2-scroll-pager/issues).


## License

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


## Resources

- [Project Page](http://kop.github.io/yii2-scroll-pager)
- [Packagist Package](https://packagist.org/packages/kop/yii2-scroll-pager)
- [Source Code](https://github.com/kop/yii2-scroll-pager)

6 0

10 followers

0 downloads

Yii Version: 2.0

License: MIT

Category: User Interface

Tags: pager, pagination, scroll, scrolling, yii2

Developed by: kop

Created on: Jan 9, 2014

Last updated: 10 years ago

Related Extensions

User Contributed Notes 7

#16619

0 0

Use Pjax instead of ajax

I tried your widget and it works very well, but how I can integrate a listview, with your pager widget and pjax?

jabbon at Mar 11, 2014, 11:46:12 PM

#16624

2 0

RE: Use Pjax instead of ajax

Hi jabbon, thank you for your question.

If you want to use Pjax for updating a list (e.g. apply some filters on it), you can use Pjax widget just as regular:

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

If you mean you want pager to send Pjax requests instead of Ajax, it will be done in the next release. This widget has been created before Pjax widget was introduced, so it knows nothing about Pjax right now. Maybe I will find some time to work on it this week.

kop at Mar 12, 2014, 11:09:57 AM

#19381

0 0

How can I use yii2-scroll-pager for Gridview

How can I use yii2-scroll-pager for Gridview

bitshine at Jun 11, 2015, 11:11:07 PM

#20336

1 0

example use
`php
Pjax::begin();
echo ListView::widget([

'dataProvider' => $data,
'itemOptions' => ['class' => 'item'],
'itemView' => '@shop/views/product/preview',
'layout' => '<div class="items">{items}</div><div class="pager">{pager}</div>',
'pager' => [
    'class' => ScrollPager::className(),
    'enabledExtensions'  => [
        ScrollPager::EXTENSION_SPINNER,
        ScrollPager::EXTENSION_PAGING,
    ],
    'negativeMargin' => -1000,
]

]);

Pjax::end();
`

atomrus1993 at Sep 6, 2018, 4:25:27 PM

#20616

0 0

scroll-pager , i have two difficulties :

load more is working only for first time , i know why because list view is not refreshing so next page detail not getting. My question is how to refresh the list view in this case.

My main aim is to load data on scroll not on load more button i tried many ways search on google as well but not getting the solution.

    ```

Pjax::begin([

        'id' => 'task_list_pjax',
        'enablePushState' => false, // to disable push state
        'enableReplaceState' => false // to disable replace state
        ]);
    echo ListView::widget([
        'dataProvider' => $dataprovider,
        'itemOptions' => ['class' => 'item'],
        'itemView' => '_task_list',
        'pager' => [
            'class' => ScrollPager::className(),
                'negativeMargin' => '150',
                'triggerText' => 'Load More Tasks',
                'triggerOffset' =>0,
                'noneLeftText' => '',
                'paginationSelector'=>'.list-view .pagination',
                'next'=>'.list-view .pagination .next a:first',
            ]
    ]);
    Pjax::end()

amiteshkumar at Sep 17, 2019, 2:31:51 PM

#20764

0 0

Any idea how to fix the last page of the gridview from infinitely repeating on scroll? I assume it is something to do with the "next" setting but I have no clue how to determine what that would be.

compugator at Jun 20, 2020, 6:56:00 PM

#21016

0 0

My indexAction() code

    public function actionIndex() {
        $this->layout = '_settings_layout';
        $dataProvider = new ActiveDataProvider([
            'query' => Video::find()->creater(\Yii::$app->user->identity->id)->latest(),
            'pagination' => [
                'pageSize' => 4
            ],
        ]);

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

my index page

     <?php
            \yii\widgets\Pjax::begin();
            echo ListView::widget([
                'dataProvider' => $dataProvider,
                'itemView' => '_all_videos',
                'layout' => '<div class="items">{items}</div><div class="pager">{pager}</div>',
                'pager' => [
                    'class' => kop\y2sp\ScrollPager::className(),
                    'negativeMargin' => '150',
                'triggerText' => 'Load More Tasks',
                'triggerOffset' =>0,
                'noneLeftText' => '',
                'paginationSelector'=>'.list-view .pagination',
                'next'=>'.list-view .pagination .next a:first',
                ],
                'itemOptions' => [
                    'tag' => false, 
                ],
                'options' => [
                    'tag' => false
                ]
            ]);
            \yii\widgets\Pjax::end();
            ?>

but i can still view the paginations in my index page - https://ibb.co/kHK7kNz

in fact it doesn't load the data when scroll down.

How can i solve my issue?

InsafiaN at Feb 25, 2022, 4:49:47 PM

Categories