Yii 1.1: inifinite-scroll-pager

Yii pager uses Infinite Ajax Scroll, a jQuery plugin
45 followers

This extension uses Infinite Ajax Scroll, a jQuery plugin

Update

March 5, 2013 Added loaderText public property. Thanks to maxxdev

February 8, 2013 Now you can manually trigger loading page. Thanks to Junior - df9. Example code also has been updated.

Requirements

Yii

Usage

Put this extension to your extensions directory

Example code

$this->widget('zii.widgets.CListView', array(
       'id' => 'VideoList',
       'dataProvider' => $dataProvider,
       'itemView' => '_view',
       'template' => '{items} {pager}',
       'pager' => array(
                    'class' => 'ext.infiniteScroll.IasPager', 
                    'rowSelector'=>'.row', 
                    'listViewId' => 'VideoList', 
                    'header' => '',
                    'loaderText'=>'Loading...',
                    'options' => array('history' => false, 'triggerPageTreshold' => 2, 'trigger'=>'Load more'),
                  )
            )
       );

Resources

https://github.com/webcreate/infinite-ajax-scroll

Demo

Total 20 comments

#17799 report it
ihemant at 2014/07/23 09:28am
You should update your source code on github

You should update your source code on github. i was following that, and i had no idea what was going on. Now that i am using code given on this page. its working.

#17345 report it
davidgraybeard at 2014/05/27 08:45pm
Never Quits, but Constantly Reloads Last Page

I'm not sure if there is a setting I am missing. I've looked through the code, and the stop_scroll() is never called. I get multiple repeats of the last page of data.

Any help would be appreciated!

$this->widget('zii.widgets.CListView',
                  [
                      'id'           => 'postings',
                      'emptyText'    => Yii::t('pdd', 'No {postLevel} yet.', ['{postLevel}' => strtolower(Post::levelName($level + 1, TRUE))]),
                      'pager'        => [
                          'class'          => 'common.extensions.infiniteScroll.IasPager',
                          'firstPageLabel' => '<<',
                          'prevPageLabel'  => '<',
                          'nextPageLabel'  => '>',
                          'lastPageLabel'  => '>>',
                          'header'         => '',
                          'rowSelector'    => '.row',
                          'listViewId'     => 'postings',
                          'loaderText'     => 'Loading...',
                          'options'        => ['noneLeft' => TRUE, 'history' => FALSE, 'triggerPageTreshold' => 2 /*sic*/, 'trigger' => 'Load more'],
                      ],
                      'dataProvider' => $dataProvider,
                      'viewData'     => ['allowExpand' => empty($parent->parentId),
                                         'currentUser' => $currentUser,
                                         'showReply'   => $showReply,
                                         'level'       => $level,
                                         'purifier'    => new CHtmlPurifier()
                      ],
                      'itemView'     => '_threadItem',
                      'template'     => Yii::app()->params['listTemplate'],
                  ]
    );
#16357 report it
cloudynight6 at 2014/02/14 04:31am
Awesome

Awesome extension!!

#15746 report it
darioo at 2013/12/11 04:59pm
Great!

That's great extension. Simple and easy to use. Good work, keep it going (Y)

#15602 report it
jzhong05 at 2013/11/27 06:20pm
2 infinite scroll caused bugs

Hi guys,

I have 2 infinite scroll in my page, they turn up affect each other. How can I make it work so they work independently?

I modified the infinite scroll js file so i made a reverse infinite scroll plugin, so right now I have 2 class, or plugins(one infinite, one reverse-invite) so they point to 2 js files. However, if I put them into the same page, both of them change to reverse infinite scroll order... It seems that 2 js files affect each other? and when one list is loading, the other one will be loading as well...

How can I solve this?

#15426 report it
beesho at 2013/11/08 09:30am
Trigger Button Not Showing

Hello, I am trying to use this extension in my app, however the trigger button is not showing at all, it only loads more records when I scroll down, and stops after several scrolls according to threshold, then I can't load anymore records because the trigger button is not displayed. Can anyone tell me why please?

#15080 report it
rei at 2013/10/05 10:48am
Rebinding IAS pager after ajax refresh

Following up on my previous questions below, I solved those problems by rebinding IAS pager after ajax update:

$this->widget('zii.widgets.CListView', array(
    ... (same as before - see my previous comment)
    'pager'=>array(
        ... (same as before)
    ),
    'afterAjaxUpdate'=>"function(id, data) {
        $.ias({
            'history': false,
            'triggerPageTreshold': 2,
            'trigger': 'Load more',
            'container': '#list-comment > .items',
            'item': '.itemdiv',
            'pagination': '#list-comment .pager',
            'next': '#list-comment .next:not(.disabled):not(.hidden) a',
            'loader': 'Loading...'
        });
    }",
));

Tpoxa informed me that if we called $.fn.yiiListView.update('...') then we destroyed HTML which IAS was bound to.

Additional info: To completely hide the old pagination buttons, I had to use custom CSS file for CListView:

$this->widget('zii.widgets.CListView', array(
    'id'=>'list-comment',
    'cssFile'=>'...' (location of CSS file),
    ...
));

In the CSS file I used default CSS file for CListView and modify the pager part:

.list-view .pager
{
    display: none;
}

Not sure if this is the best way to handle it, but at least that works fine for me. :)

#14840 report it
rei at 2013/09/13 11:38pm
Pager changes after updating CListView

I also noticed that pager also changed after calling:

$.fn.yiiListView.update('...');

Is it a bug? Does anyone know how to resolve this issue?

#14803 report it
rei at 2013/09/11 12:02am
Pager changes after sorting

Has anyone ever tried to use sorting feature with this extension? The pager changed to normal CListView pager and 'Load more' button disappeared after I clicked sort link.

$this->widget('zii.widgets.CListView', array(
    'id'=>'list-comment',
    'dataProvider'=>$dataProvider,
    'enableSorting'=>true,
    'sortableAttributes'=>array('up_vote', 'date'),        
    'template'=>'{sorter} {items} {pager}',
    'itemView'=>'_view',
    'pager'=>array(
        'class'=>'ext.infiniteScroll.IasPager', 
        'rowSelector'=>'.itemdiv', 
        'listViewId'=>'list-comment', 
        'header'=>'',
        'loaderText'=>'Loading...',
        'options'=>array(
            'history'=>false, 
            'triggerPageTreshold'=>2, 
            'trigger'=>'Load more'
        ),
    )
));

Still, this is a nice work. Thanks, Tpoxa!

#14565 report it
thyseus at 2013/08/23 06:21am
Works good !

Works very good once you know that setting the 'rowSelector' and 'listViewId' is necessary. Maybe someone should update the Documentation. Thanks for this work !

#14140 report it
ibrahimd at 2013/07/22 03:50pm
about after ajax update

@Davuz,

Your function casts as string by Yii. If you add js: before the function, it will be work perfectly.

Eg: 'onRenderComplete'=>"js:function(items) {console.log('We rendered ' + items.length + ' items');}",

#13930 report it
Davuz at 2013/07/07 11:50pm
How do I use callback function after ajax update?

I want to change something on items after update page. So, I used:

'pager' => array(
                    'class' => 'ext.infiniteScroll.IasPager', 
                    'rowSelector'=>'.noteItem', 
                    'listViewId' => 'noteCList', 
                    'header' => '',
                    'loaderText'=>'Loading...',
                    'options' => array(
                        'history' => true, 
                        'triggerPageTreshold' => 4,
                        'trigger'=>'Load more',
                        'onRenderComplete'=>"function(items) {console.log('We rendered ' + items.length + ' items');}",
                    ),
    ),

The function for 'onRenderComplete' i found at http://goo.gl/drrPJ

But console window output error:

Uncaught TypeError: Object function(items) {console.log('We rendered ' + items.length + ' items');} has no method 'call' //jquery.ias.js line 222

#13419 report it
rajesh chaurasia at 2013/05/28 09:58am
hi friends

this is not working fine for me.

#13339 report it
v_bogdan at 2013/05/22 08:32pm
the same page number

when i press "load more" at first, next page successfully loading, but when i pressing "load more" again - it's loading the same page again, but not next

#13060 report it
fernandrez at 2013/04/30 06:12pm
Adding

I am floating the items so the items div doesnt seem to have any height (when higlighted in firebug doesnt shade al the CListView). Could this affect somehow?

#13058 report it
fernandrez at 2013/04/30 06:01pm
Not working

Hey guys this isnt working for me; CActiveDataProvider creation:

public function search($User_Id='',$Favoritos=false)
    {
        // Warning: Please modify the following code to remove attributes that
        // should not be searched.
        $criteria=new CDbCriteria;
        $criteria->with=array('subtipoElemento','estado','ciudad','objetivo','elementoPrecioOrden');
        switch ($this->Elemento_Tipo) {
            case 1:
                array_push($criteria->with,'eInmueble');
                break;
 
            case 2:
                array_push($criteria->with,'eVehiculo');
                array_push($criteria->with,'eVehiculo.fasecolda');
                break;
        }
        if($User_Id!=''){
            if($Favoritos){
                array_push($criteria->with,'elementoFavoritos');
                $criteria->compare('elementoFavoritos.Usuario_Id',$User_Id);
            }
            else
            {
                $criteria->compare('Owner_Id',$User_Id);
            }
        }
        //$criteria->compare('Elemento_Id',$this->Elemento_Id);
        if($this->Elemento_Tipo!=''){$criteria->addCondition('subtipoElemento.Tipo_Elemento_Cd='.$this->Elemento_Tipo);}
        if($this->Elemento_Subtipos!=''){$criteria->addInCondition('t.Subtipo_Elemento_Cd',$this->Elemento_Subtipos);}
        //if($this->Elemento_Objetivos!=''){$criteria->addInCondition('Objetivo_Cd',$this->Elemento_Objetivos);}
        if($this->Elemento_Ubicaciones!=''){$criteria->addInCondition('eInmueble.Ubicacion_Opcion',$this->Elemento_Ubicaciones);}
        if($this->Elemento_Ciudades!=''){$criteria->addInCondition('t.Ciudad_Id',$this->Elemento_Ciudades);}
 
        if($this->Elemento_Tipo==1){
            if($this->Numero_Habitaciones_Min!='' && $this->Numero_Habitaciones_Max!='')
            {$criteria->addBetweenCondition('eInmueble.Numero_Habitaciones',$this->Numero_Habitaciones_Min,$this->Numero_Habitaciones_Max);}
            if($this->Numero_Banos_Min!='' && $this->Numero_Banos_Max!='')
            {$criteria->addBetweenCondition('eInmueble.Numero_Banos',$this->Numero_Banos_Min,$this->Numero_Banos_Max);}
            if($this->Numero_Parqueaderos_Min!='' && $this->Numero_Parqueaderos_Max!='')
            {$criteria->addBetweenCondition('eInmueble.Numero_Parqueaderos',$this->Numero_Parqueaderos_Min,$this->Numero_Parqueaderos_Max);}
            if($this->Ano_Construccion_Min!='' && $this->Ano_Construccion_Max!='')
            {$criteria->addBetweenCondition('eInmueble.Ano_Construccion',$this->Ano_Construccion_Min,$this->Ano_Construccion_Max);}
            if($this->Area_Construida_Min!='' && $this->Area_Construida_Max!='')
            {$criteria->addBetweenCondition('eInmueble.Area_Construida',$this->Area_Construida_Min,$this->Area_Construida_Max);}
            if($this->Elemento_TiposCocina!=''){$criteria->addInCondition('eInmueble.Tipo_Cocina_Opcion',$this->Elemento_TiposCocina);}
            if($this->Elemento_TiposPiso!=''){$criteria->addInCondition('eInmueble.Piso_Opcion',$this->Elemento_TiposPiso);}
            if($this->Elemento_TiposTecho!=''){$criteria->addInCondition('eInmueble.Techo_Opcion',$this->Elemento_TiposTecho);}
        }
        elseif($this->Elemento_Tipo==2){
            if($this->Ano_Vehiculo_Min!='' && $this->Ano_Vehiculo_Max!=''){$criteria->addBetweenCondition('eVehiculo.Ano',$this->Ano_Vehiculo_Min,$this->Ano_Vehiculo_Max);}
            if($this->Elemento_Marcas!=''){$criteria->addInCondition('fasecolda.Marca',$this->Elemento_Marcas);}
            if($this->Elemento_Lineas!=''){$criteria->addInCondition('fasecolda.Referencia1',$this->Elemento_Lineas);}
            if($this->Elemento_Combustibles!=''){$criteria->addInCondition('eVehiculo.Combustible_Opcion',$this->Elemento_Combustibles);}
            if($this->Elemento_Transmisiones!=''){$criteria->addInCondition('eVehiculo.Transmision_Opcion',$this->Elemento_Transmisiones);}
            //if($this->Elemento_Direcciones!=''){$criteria->addInCondition('eVehiculo.Direccion_Opcion',$this->Elemento_Direcciones);}
            //if($this->Elemento_Blindajes!=''){$criteria->addInCondition('eVehiculo.Blindaje_Opcion',$this->Elemento_Blindajes);}
            /*$criteria->compare('Activo',$this->Activo);*/
        }
        return new CActiveDataProvider($this, array(
            'criteria'=>$criteria,
            'sort'=>array(
            'attributes'=>array(
                'Objetivo_Cd'=>array(
                    'asc'=>'objetivo.Objetivo_Desc',
                    'desc'=>'objetivo.Objetivo_Desc DESC',
                ),
                'Ciudad_Id'=>array(
                    'asc'=>'ciudad.Nombre_Ciudad',
                    'desc'=>'ciudad.Nombre_Ciudad DESC',
                ),
                'Subtipo_Elemento_Cd'=>array(
                    'asc'=>'subtipoElemento.Subtipo_Elemento_Desc',
                    'desc'=>'subtipoElemento.Subtipo_Elemento_Desc DESC',
                ),
                'PrecioOrden'=>array(
                    'asc'=>'elementoPrecioOrden.Precio ASC',
                    'desc'=>'elementoPrecioOrden.Precio DESC',
                ),
                '*',
            ),
    ),
        ));
    }

View using CListView to display the dataProvider:

<?php $this->pageTitle='Home';?>
<?php if(isset($model)){ ?>
<div style="font-size: 1.5em;">Inicio</div>
<?php } else {?>
<?php } ?>
<?php 
if(isset($model))
    $dataProvider=$model->search();
$this->widget('zii.widgets.CListView', array(
    'id'=>'elemento-list',
    'dataProvider'=>$dataProvider,
    'itemView'=>'application.modules.anunzo.views.elemento._view',
    'template'=>'{summary}{sorter}<div class="clear"></div>{items}<div class="clear"></div>{pager}',
    'sortableAttributes'=>array(
        'Subtipo_Elemento_Cd',
        'Objetivo_Cd',
        'Ciudad_Id',
        'PrecioOrden'
    ),
    'summaryText'=>'Resultados: {start}, {end}, {count}',
    'pager' => array(
                    'class' => 'ext.infiniteScroll.IasPager', 
                    'rowSelector'=>'.row', 
                    'listViewId' => 'elemento-list', 
                    'header' => 'Hey',
                    'loaderText'=>'Loading...',
                    'options' => array('history' => false, 'triggerPageTreshold' => 10, 'trigger'=>'Load more'),
                  ),
));?>
#12966 report it
Tpoxa at 2013/04/23 06:52pm
Disable history

Try set history=>false as in example code to disable history support

#12965 report it
jiaming at 2013/04/23 06:29pm
URL changes when you scroll.

Hi, i noticed that the url has changed to 123.com/page/2 when you scroll down. This is a little bit inconvenience because user can't click go back in their browse to go back to previous page anymore, they are going to /page/1 instead. Also, if you refresh the page, the url stays as /page/2 which automatically scrolls you down.

Is there a way to prevent this from happening? (so the url remains the same all the time when you scroll)

Thank you.

#12609 report it
Skylight at 2013/04/01 08:03am
Junior - df9

Hi,

Thanks for the fast replay... It's indeed the first thing I've tried ... It seems it is working now but the pagination buttons are still displayed after the update ...

Regards

#12606 report it
Junior - df9 at 2013/04/01 06:00am
Skylight

Hi, have you tried calling "jQuery.ias(..." code again after the "..fn.update..." ?

regards

Leave a comment

Please to leave your comment.

Create extension