Skip to content

This extension uses the infinite scroll jQuery plugin, from http://www.infinite-scroll.com/ to create an infinite scrolling pagination, like in twitter

Notifications You must be signed in to change notification settings

apostolp/yiinfinite-scroll

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 

Repository files navigation

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',
    'loadingImg' => '/images/lazy.gif',
    'loadingText' => 'Loading...',
    'donetext' => 'This is the end... my only friend, the end',
    'jsCalback' =>
	'function( newElements ) {
                    /* some code */
                }',
    '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
  • errorHandler: Javascrit function that is called when the ajax errors or 404s.
  • loadingImg: loading image
  • jsCalback: optional callback when new content is successfully loaded in.

Changes 3/3/2012:

  • add new parametr loadingImg
  • add new parametr jsCalback

About

This extension uses the infinite scroll jQuery plugin, from http://www.infinite-scroll.com/ to create an infinite scrolling pagination, like in twitter

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • PHP 100.0%