CLinkPager ajax pagination

Is it possible to use ajax with the CLinkPager class like we also can do with the CGridView widget?

Greetings Arjan

I did that by capturing the click events of its links with javascript code…

Thanks for reply do you have a little example for me?

Greetings Arjan

  1. Check your resulting HTML code (use Firebug inspector or Chrome for that) and get the main CSS class of the pager (remember that you can also set that with its htmlOptions)

  2. Then just capture its click events




// 

$('ul.clinkpagerclass > li > a').click(function() // ....



For more information about selectors:

http://api.jquery.com/child-selector/

I did it by extending the CLinkPager class but at some point i am getting the wrong url.

http://localhost/bestelbon/index.php?r=photos/index&id=7&page0=2&_=1306741671886

The url above has to be

http://localhost/bestelbon/index.php?r=photos&id=7&page0=2&_=1306741671886

SimplePager.php




<?php

class SimplePager extends CLinkPager {

	

     protected function createPageButton($label,$page,$class,$hidden,$selected)

     {

                if($hidden || $selected)

                        $class.=' '.($hidden ? self::CSS_HIDDEN_PAGE : self::CSS_SELECTED_PAGE);

                return '<li class="'.$class.'">'.CHtml::ajaxLink($label,$this->createPageUrl($page)).'</li>';

    }

		

}

?>



Controller PhotosController




<?php

	public function actionIndex()

	{

		

		$this->layout='photos';

		

		$group=new CActiveDataProvider('Photos', array(

			'criteria'=>array(

				'select'=>'DISTINCT status',

				'order'=>'status ASC',

			),

		));	


		foreach($group->data as $key => $gd)

		{

			$dataProvider[]=new CActiveDataProvider('Photos', array(

				'criteria'=>array(	

					'condition'=>'user_id='.Yii::app()->user->getId().' AND status = '.$gd->status,

				),

				'pagination'=>array(

					'pageSize'=>4,

					'pageVar'=>'page'.$key,

				),

			));


		}

		

		$this->render('index',array(

			'dataProvider'=>$dataProvider,

			'group'=>$group,			

		));		

	}

?>



View index.php




<?php

$this->breadcrumbs=array(

	'Photos',

);

?>


<?php if(!empty($dataProvider)){ ?>

	<?php foreach($dataProvider as $key => $dp){ ?>

          

        <div id="grid">

    

            <div id="grid-title">

                <h3><?php echo CHtml::encode($dp->data[0]->textStatus('title')); ?></h3>

            </div>

               

            <div id="grid-comment"><?php echo CHtml::encode($dp->data[0]->textStatus('comment')); ?></div>

            

            <?php $i=0; ?>

            <table width="100%">           

            <?php foreach($dp->data as $data){ ?>


            <?php $i++; ?>

			<?php if($i % 5 == 0) { ?>

            <tr> 

            <?php } ?>           

            <td width="25%" style="text-align:center">

    		<?php echo CHtml::link(CHtml::image("images/photos/thumbnails/".$data->id."_thumb.jpg"), array("update", "id"=>$data->id)); ?>

            </td>

            <?php if($i % 5 == 0) { ?>

 			</tr>          

    		<?php } ?>


            <?php } ?>

            </table>

            <br />

            <?php $this->widget('CLinkPager',array('pages'=>$dp->pagination)); ?>           

        

        </div>

        

    <?php } ?>

<?php } else { ?>

	<?php $this->redirect(array('upload')); ?>

<?php } ?>



Sorry url is ok just forgotten to add array(‘update’=>‘body’) to the CHtml::ajaxLink class now it’s working.




<?php


class SimplePager extends CLinkPager {

	

     protected function createPageButton($label,$page,$class,$hidden,$selected)

     {

                if($hidden || $selected)

                        $class.=' '.($hidden ? self::CSS_HIDDEN_PAGE : self::CSS_SELECTED_PAGE);

                return '<li class="'.$class.'">'.CHtml::ajaxLink($label,$this->createPageUrl($page),array('update'=>'body')).'</li>';

    }

		

}


?>



The only problem now is that when the page reloads it returns the result of all pagers and not only the one i clicked???

SimplaPager? You got that from my blog :)

I think the problem lies on the creation of the URL, do this:





return '<li class="'.$class.'">'.CHtml::ajaxLink($label,$this->createPageUrl($this->getController(),$page),array('update'=>'body')).'</li>';



Cheers

Yeah you are right it’s from your blog thanks for that :)

Still no luck with the pagination i got it working with a CGridView but the problem with the CGridView is that i want 4 results in one row and not 1 result each.




            <?php $this->widget('zii.widgets.grid.CGridView', array(

                'id'=>'photos-grid-'.$key,

                'dataProvider'=>$dp,

                'hideHeader'=>true,

                'cssFile'=>false,

				'template'=>'{items}{pager}',

                'columns'=>array(

                    array(

                        'type'=>'html',			

                        'value'=>'CHtml::link(CHtml::image("images/photos/thumbnails/".$data->id."_thumb.jpg"), array("update", "id"=>$data->id))',

                        'htmlOptions'=>array('class'=>'grid-thumb'),

                    ),

                ),

                'pager'=>array(

                        'class'=>'CLinkPager',

                        'cssFile'=>false,

                        'header'=>'', 

                        'prevPageLabel'=>'<', 

                        'nextPageLabel'=>'>',

                        'firstPageLabel'=>'First',

                        'lastPageLabel'=>'Last',

    ),			

            )); ?>