Yii 1.1: yiinfinite-scroll

Creates an Infinite Scroll Pagination, like in Twitter

This extension uses the infinite scroll jQuery plugin, from http://www.infinite-scroll.com/ to create an infinite scrolling pagination, like in twitter. This kind of pagination is also called Endless Scroll.

It uses javascript to load and parse the new pages, but gracefully degrade in cases where javascript is disabled and the users will still be able to access all the pages.


Yii 1.1.4


The YiinfiniteScroller class extends the CBasePager class, so you will use it the same way as CLinkPager and CListPager.

On your controller you need to create the CPagination class which controls the pages handling:

class PostController extends Controller
    public function actionIndex()
            $criteria = new CDbCriteria;
            $total = Post::model()->count();
            $pages = new CPagination($total);
            $pages->pageSize = 20;
            $posts = Post::model()->findAll($criteria);
        $this->render('index', array(
                'posts' => $posts,
                'pages' => $pages,

Now on your view you will use it as a widget, like in the following sample:

$this->widget('ext.yiinfinite-scroll.YiinfiniteScroller', array(
    'itemSelector' => 'div.post',
    'pages' => $pages,

Note that this will only output the necessary code to the pager. It will not render the page items. Since YiinfiniteScroller extends CBasePager, everything works exactly the same way as if you were using the CListPager or CLinkPager. So, you're need to manually render the items.

In this example, the items are stored in the $posts variable. In our view, we can render the posts by using a simple foreach loop, like in the example bellow:

<?php foreach($posts as $post): ?>
    <div class="post">
        <p>Autor: <?php echo $post->author; ?></p>
        <p><?php echo $post->text; ?></p>
<?php endforeach; ?>

This is how the complete view file will look like:

<div id="posts">
<?php foreach($posts as $post): ?>
    <div class="post">
        <p>Autor: <?php echo $post->author; ?></p>
        <p><?php echo $post->text; ?></p>
<?php endforeach; ?>
<?php $this->widget('ext.yiinfinite-scroll.YiinfiniteScroller', array(
    'contentSelector' => '#posts',
    'itemSelector' => 'div.post',
    'loadingText' => 'Loading...',
    'donetext' => 'This is the end... my only friend, the end',
    'pages' => $pages,
)); ?>

There are a few properties that can be set for YiinfiniteScroller:

  • contentSelector: The jQuery selector of the container element where the loaded items (from itemSelector) will be appended
  • loadingText: The text to be displayed while a new page is being loaded
  • loadingImg: The URL of the image displayed while a new page is being loaded
  • donetext: The text to be displayed when all the pages had been loaded
  • pages: The CPagination object
  • errorCallback: Javascript function that is called when there are ajax errors or 404s.
  • contentLoadedCallback: A Javascript function that is called when new itens are loaded. In its scope, this will be the DOM Element just loaded.
  • navigationLinkText: The text to be displayed in the navigation link (Usually visible only when javascript is disabled). The default value is "next".


  • Release 1.3 (09/02/2014)

    • Added the contentLoadedCallback
    • Added tests!
    • Fixed bug that loaded the last page twice
    • Removed the navigation link in the last page. That link was pointing to a non existent page.
  • Release 1.2 (11/11/2013)

    • Added the navigationLinkText property
    • Fixed problems when there were 0 or 1 pages to be paged


Total 20 comments

#19934 report it
benomatis at 2016/08/21 03:03am
RE: Uncaught TypeError: Cannot read property 'msie' of undefined

@kasinau Fair point, though it's possible that the extension has been developed before the newer releases of jQuery have become available, and hasn't been updated since. Either way, I'm not the doc owner and have no permission to edit it.

#19933 report it
kasinau at 2016/08/21 01:15am
Uncaught TypeError: Cannot read property 'msie' of undefined

@benomatis, yes, you are right, it is related to the jQuery version I use(1.10.*), but in this extension's documentation it isn't specified the compatible jQuery version, so I find this related to this extension too, please update the doc an specify that it's compatible with jQuery < 1.9. I fixed the problem by upgrading the jquery.infinitescrool.min.js from assets. Best.

#19932 report it
benomatis at 2016/08/20 05:14pm
RE: Uncaught TypeError: Cannot read property 'msie' of undefined

@kasinau having a quick look on the net it may be related to the jQuery version you're using, otherwise I recommend posting your issue with more details on StackOverflow or some other q/a site, as commenting on the extension here is not the right place to try and solve issues you may have, especially if not directly related to the extension (otherwise everybody would report it)...

#19931 report it
kasinau at 2016/08/20 01:59pm
Uncaught TypeError: Cannot read property 'msie' of undefined

Hi, I try to use this component for pagination, on local and dev server it works fine, but on live I get the following error:

Uncaught TypeError: Cannot read property 'msie' of undefined

Can anyone help me with solving it? Thank you!

#18774 report it
dj_distinct at 2015/01/04 08:59pm
Smart Anchor Support

Would you consider adding some type of intelligent anchor support for elements that have not yet been loaded? (because the user has not scrolled down)

It would be nice to call xyz.com/somepage#autoscrollhere and have the extension scroll to the appropriate anchor. In this case, #autoscrollhere

Just curious, Thanks for a great ext.

#18735 report it
hippyjim at 2014/12/19 06:29am
Need more examples

I can't figure out how to make this work with CListView. It does nothing when I add it as a pager. No javascript errors, literally nothing happens when I scroll.

Any examples?

my code:


public function actionIndex()
        $dataProvider=new CActiveDataProvider('Student');
        $dataProvider->pagination->pageSize = 20;


$this->widget('zii.widgets.CListView', array(
    'pager'=> array(
#18650 report it
Firebreaker at 2014/12/06 01:16pm
Success callback function

Hi, is there any solution to callback any function when next page is loaded successful? Thanks

#18569 report it
Devendra Kumar at 2014/11/19 02:45am
Not working with filters with ajax call on product listing page

Hi, I am using yii infinite scroll extension in a product list page for infinite pagination. Here, there are several filters to filter the products. I am using ajax call to filter out products based on certain filters. My problem is infinite scroll is not working fine with filter data. Like, there are 135 total products and i am showing 30 products on a page.

First case - If i apply Filter like price is less than 500 then the result is 23 products. So it shows 23 products but when i scroll down the page, it will shows the page 2 product of the default listing and continues. The ideal result is it will show only 23 products.

Second case - Like if i apply filter price is greater than 500 then the result is 45 products. So on first page it shows 30 products of the filtered result but when i scroll down the page then it will show the next 30 page of default listing and again n again.

So my question is how i can use this extension with filters on a product listing page???

#18072 report it
Ankit Modi at 2014/09/04 02:34am

Thanks for resolve,that is exactly looking for this

Regards, Ankit Modi

#18061 report it
davi_alexandre at 2014/09/02 02:55pm
Re: Script is not working properly

Hi @ihemant. The new release fixes the problem where the last page is loaded twice. Also, the README was updated with information about the loadingImg property that can be used to change the loading gif

#17880 report it
inProcess at 2014/08/05 09:09am

I think I experienced your latest issue ...I solved by changing the content selector & item selector div id to something different on the second tab.

#17879 report it
ihemant at 2014/08/05 08:26am
Multiple Pagination on a single page, causing error

Hi I am working on a profile page, where I need to show the list of comments and list of posts. I am showing them in different tabs on a single page. Now when I call pagination, both the paginations are working at once, is there a method where i can tell the process the difference between these tabs.

Or anything else to run both the paginations simultaneously without interrupting each other.

#17793 report it
ihemant at 2014/07/23 02:58am
Script is not working properly

Its repeating my last page twice. Rest its working good. Also can anyone tell how do i replace loading gif with mine?

#17368 report it
euginepj at 2014/05/29 09:59am
Javascript not loading

I am really thankful for the plugin. It works great. But I got a problem, The Javascript is loading is first page. but not loading on the rest.

Here is the code i am working with.

<?php $this->widget('ext.yiinfinite-scroll.YiinfiniteScroller', array(
    'contentSelector' => '#infinityScroller',
    'itemSelector' => 'div.itemDiv',
    'loadingText' => 'Loading...',
    'donetext' => 'This is the end... ',
    'pages' => $pages,
)); ?>

I had tried using renderPartial. but still the problem remains the same.

    $this->renderPartial('object_list', $content, false, true);

Everything else works fine.

#17069 report it
Sebastian at 2014/04/29 10:24pm
Logic error in currentPageDoesntExists()

I use this script very close to the actual example and it works pretty well, however I had the issue that the last page was repeated once. So if there should've been only 3 pages, I would get content of: 1, 2, 3, 3 (end). Checking the code, there seems to be a problem here:

private function currentPageDoesntExists() {
        if($this->pageCount > 1) {
            return $this->currentPage > $this->pageCount;
        } else {
            return $this->currentPage > 0;

If pageCount is 3 and we are on page 3 already, this will return 3 > 3, which is false. However the code for sending a 404 which means there is no next page, checks the end like this:

if($this->currentPageDoesntExists()) {
            throw new CHttpException(404);

So we will have to return true in this function, to have it correctly throw the 404. So the corrected code should look like this:

private function currentPageDoesntExists() {
        if($this->pageCount > 1) {
            return $this->currentPage >= $this->pageCount;
        } else {
            return $this->currentPage > 0;

Regards, Sebastian

#16956 report it
Mohammed Sajin at 2014/04/16 06:38am
The autoload is not working in after Category sort using ajax

Hi All,

I have implemented the infinite scroller on my products page and is working fine. But after I sort my products by category which loads the results in AJAX. The infinite scroller is not working. Can any one help me on this. I have spent hours to sort out this problem. Is this a script conflict or the script is not loading. Im using renderPartial to load the sorted products and I have also set third and fourth parameter of the renderPartial as false,true.

#16428 report it
rei at 2014/02/22 01:48am
Re: Use with data provider
How can i use this with a data provider?

Did you intend to use it with CListView? If yes, please see here: http://www.yiiframework.com/forum/index.php/topic/33029-yiinfinite-scroll-and-afterajaxupdate/

Although there is problem with that, it could display data properly as far as I could see.

#15603 report it
jzhong05 at 2013/11/27 07:37pm
Use with data provider

Hi guys,

How can i use this with a data provider?

Thank you, jim

#14792 report it
sheraz.s at 2013/09/10 03:49am
Plugin not working in AJAX

Hi, Thanks for this amazing plugin. Plugin works fine in normal scenario but in ajax it is not working properly. I am scrolling the content manually. The problem is of URL.

After ajax update , the "More" button has a url for another ajax call to load more content. When i click on the "More" button, this request is sent to the URL which is in the address bar not the URL which is for ajax request. Can some body solve this issue.?

#13470 report it
Jose H. Milán at 2013/05/30 07:21am

If you want to work in localMode (just over a div) you need to add this to add a private option in YiinfiniteScroller.php:

private $_options = array(
        'loadingImg'    => null,
        'loadingText'   => null,
        'donetext'      => null,
        'itemSelector'  => null,
        'errorCallback' => null,
       ** 'localMode'     => null,**

After that you can use

'localMode' => true,

in your widget options.

Thanks for this extension mates!

Leave a comment

Please to leave your comment.

Create extension