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.

Requirements ¶

Yii 1.1.4

Usage ¶

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;
            $pages->applyLimit($criteria);
 
            $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>
    </div>
<?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>
    </div>
<?php endforeach; ?>
</div>
<?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 and a new page is being loaded,
donetext: The text to be displayed when all the pages had been loaded,
pages: The CPagination object, ));

Resources ¶

Total 19 comments

#8292

vasireddy at 2012/05/23 08:04am

Is there any way we can stop this after n number of pages

Thanks for this great plugin . Could you please let me know for example if we have 20 pages , display the scrolling up to 10 pages and then showing show more button. For example if you look at facebook wall or alubums , facebook only scrolls you for 10 times and then shows load more button .. I couldn't find that option or am I missing any option ..

Thanks for your help again

Regards Yii Fan

#8279

tudoroiuj at 2012/05/22 01:25pm

resolved

it's very simple with mansory. i just tell use pagination and insert in view:

And he does the rest of the job.

thank you

#8276

tudoroiuj at 2012/05/22 01:10pm

great extension

hi, thank you for this extension, it's works great. I have a pro lem with integrating with http://masonry.desandro.com/demos/infinite-scroll.html

The Masonry has great way to arrange the boxes... do you have a solution?

thank you

#7782

peterjkambey at 2012/04/18 02:14am

wonderfull.. and thank you....

Wow,

poor me... I already read this extension several times, but i really dont what the purpose of this extension, and finally when see the demo, i surprise, "this is the extension that I looking for month...."

Thank you davi_alexandre, thank you community.. I really need this extension to show the tree of all of Chart of Account (Accounting apps) in partial way to cut loading times...

#7325

DoLaikaBoss at 2012/03/14 09:29am

Well done

Thanks, it works perfectly.

#7063

charlewn at 2012/02/22 02:21am

How do you extend it so it works with callback function?

Hi, I want to add function callback with jQuery masonry like the codes below:

}, function ( newElements ) {
 
            setTimeout(function() {
                $container.masonry({ appendedContent: $(newElements) });
            }, 50);
 
            }
        );

How can you do that?

Thanks in advance.

#6650

davi_alexandre at 2012/01/25 10:00am

@yokesh28

I didn't understand the problem you're facing. Can you give me more details and show me the code on how you're using the extension?

#6643

yokesh28 at 2012/01/24 11:16am

data printing 3 time

Data printing 3 times from the table... what was th

#6629

yokesh28 at 2012/01/23 07:51am

not woking

all data showing when rendering...... below showing next button

#5610

jule at 2011/10/25 03:49am

Nice one! Please add htmlOptions to hidden navigationlink

Hi, very nice extension! Just a tipp: I needed html options for the infinite_navigation links to hide these links from Google. Just add in the class header

public $linkHtmlOptions = array();

and in the function that creates the navigation

private function renderNavigation() {
        $next_link = CHtml::link('next',$this->createPageUrl($this->getCurrentPage(false)+1), $this->linkHtmlOptions);
(..)

Thanks alot Jule from Hamburg

#4723

hermesck at 2011/08/08 10:46am

Using with CListView

$this->widget('zii.widgets.CListView', array(
    // Default CListView configuration
    'dataProvider'=>$dataProvider,
    'itemView'=>'infinitelist_item',
    // Custom Infinite Scroller pagination
    'id'=>'list-identifier',
    'pager'=>array(
        'class'=>'ext.yiinfinite-scroll.YiinfiniteScroller',
        'contentSelector' => '#list-identifier div.items',
        'itemSelector' => 'div.view',
    )
));

#4675

raxy at 2011/08/03 06:10am

is there any way I can use this with CListView

can someone please help me how can I use it with CListView widget

#4598

jule at 2011/07/25 08:34am

thx!!

that's exactly what i was looking for. works fine, thanks for the examples! i just had to change the "$(..." in your YiinfiniteScroller class to "jQuery(.." that's the more popular way. thumbs up. jule

#3514

intel352 at 2011/04/16 04:31pm

Excellent addition to Yii

Looks like a great addition, just what I'm needing right now. Cheers!

#3346

nickcv at 2011/04/05 06:33am

gonna try this for sure!

keep up the good work pal!

#3296

davi_alexandre at 2011/03/31 11:05pm

More usage samples

Description updated with more detailed examples of how to render the items. :)

#3295

austintodo at 2011/03/31 09:56pm

I still don't get it...too.

How did I render the items in view with this widget?

Can anyone post a sample code?

Thanks!

#2840

Say_Ten at 2011/02/15 06:35am

This widget doesn't handle the rendering.

You render the items on the page yourself, use a loop or a CListView for example. This will make a call back to the page with the next page in the query string. Take the contents of the items on that page and insert it into the current page.

#2798

luisloboborobia at 2011/02/11 08:49pm

How do I set each of my elements?

I still dont get it... How do I set how to render each item?

Please login to leave your comment.

yiinfinite-scroll

Requirements ¶

Usage ¶

Resources ¶

Total 19 comments

Leave a comment

Yii Supporters