inifinite-scroll-pager Follow @yiiframework

Yii pager uses Infinite Ajax Scroll, a jQuery plugin

Requirements

Usage

Resources

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 19 comments

#13060

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

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

Tpoxa at 2013/04/23 06:52pm

Disable history

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

#12965

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

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

Junior - df9 at 2013/04/01 06:00am

Skylight

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

regards

#12601

Skylight at 2013/03/31 07:31pm

Not working on CListView update

Hi,

This is an awesome plugin, it helped me a lot! I have a slight problem which I was trying to correct with no success ...

When the page loads for the first time, the infinite scrolling works ok. But if I am making an $.fn.yiiListView.update() on the list that has the infinite scrolling, it stops working and it displays the pagination buttons instead.

Does anyone knows how to solve this issue ? It took me hours to solve this but I didn't find a solution.

Thanks so much !

#12576

Junior - df9 at 2013/03/29 10:01am

Answering my own question after hours

After hours debugging javascript, it was not the problem...I just removed some URL rules in the main config file.

As I use slugs to show beautiful URLs, it seems that the following rule:

'webtv/<slug:[a-zA-Z0-9-]+>'=>'webtv/view',

Was messing things out.

My infinite-scroll is in the index action of WebtvController and when it calls for the 2nd page, the "view" action is called, which has a redirect when it can't find the model by slug, so a second call is made to the webtv index, giving the first page again...

Thanks anyway guys

Regards

#12574

Junior - df9 at 2013/03/29 09:32am

Double call to get page and get always 1st page

Hi, guys, I'm probably missing sth but infinite always get the first page of the dataprovider.

I saw in firebug that it makes 2 calls: 1 - call the url to get the second page - OK 2 - call the url of the page without parameters (maybe here gets the first page again) - wrong?

The content is always appended by the first page

Any clues on how to solve this?

Thank you very much!

#12169

maxxdev at 2013/03/04 03:11am

Pls add ability to change loader text

Thanks for extension. Pls add ability to change loader text

public $loaderText = 'Loading...';
'loader' => $this->loaderText ,

#11764

Junior - df9 at 2013/02/02 04:42am

Manual Trigger

Hello!

Please, update the extension so ppl can enjoy the new feature "Manual Trigger"

Thanks in advance

Regards!

#10653

jiaming at 2012/11/11 08:42pm

Multiple infinite scrolls in the same page?

Hi, Thanks for this great contribution.

I am implementing the tabs in my page so I want multiple infinite scrolls for every tabs...

Is there a way to do so? Right now only one is allowed per page.

#10648

Tpoxa at 2012/11/11 05:51am

Array of models

If you have array of models then you could create CArrayDataProvider and still use CListView with this extension

#10647

Duc Tran at 2012/11/11 05:00am

One limitation

This widget works great. However it relies on the pagination of CListView, I need to pass models of object instead of array of object. Do you have any idea how to improve it?

#10581

jiaming at 2012/11/06 01:22am

This is goddamn beautiful.

Thanks for your great contribution.

#10440

Cozumel at 2012/10/28 09:34pm

Thank You!

Beautiful code, thank you for taking the time to make this!

#9570

allain at 2012/08/23 04:52pm

This works beautifully!

Thank you so much!

#8813

nervlin at 2012/06/29 02:32pm

Error noticed

My testdrive is fatal on

$cs->registerCSSFile($this->baseUrl . '/css/jquery.ias.css')
->registerScriptFile($this->baseUrl . '/js/jquery.ias.js', CClientScript::POS_END);
 
need to be change as
 
$cs->registerCSSFile($this->baseUrl . '/css/jquery.ias.css');
$cs->registerScriptFile($this->baseUrl . '/js/jquery.ias.js', CClientScript::POS_END);
 
and
 
CArray::merge($this->options,
 
need to be change as
 
CMap::mergeArray($this->options,

#8804

Sampa at 2012/06/27 05:52pm

afterAjaxUpdate

If you need to run javascript after new items been loaded (in case some jquery breaks...) then add 'options'=>array('onRenderComplete'=>'js:function () {
     ///js code here
    }'),

Please login to leave your comment.