CPagination without Page Refresh

Yii 1.1 General Discussion
#1

Hi,

So I’m currently returning data back from the ajax call. That data is my view, which display all my data and a pagination. However one I click on the paginations they reload to a different page, and are not happening via ajax. The pagination works, but its not loading them in the same view, its reloading the page and I’m using renderPartial on the view so it will just be a white page with no template, with the data there.

In other words, maybe I didn’t explain it that well:

I’m trying to implement CPagination with Ajax. The reason why, is because the page (that has the pagination) is being loaded as a Ajax return function(data) into a div status like $("div#status).html(data). I’m using renderPartial to load the view that has the pagination. The pagination works, but its not in ajax. I want it to do it in ajax and return the results into $(div#status)

Thanks, mnouh

#2

I just created my first widget, and it works. However its extremely slow. I’m assuming its because ajax within ajax. and that will cause a big problem. Its exponentially doing it it seems. I’m using renderPartial to display the view, and this will call that controller again and render the view again.


<?php


class MoPager extends CLinkPager {


    

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

        //parent::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('success'=>'js:function(data) {

                                                    jQuery("div#status").html(data);}')).'</li>';

    }

    

    


}




?>
#3

SOLUTION:

Set the live in htmlOptions to false.


<?php


class MoPager extends CLinkPager {


    

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

        //parent::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('success'=>'js:function(data) {

                                                    jQuery("div#info").html(data);}'), array('live'=> false)).'</li>';

    }

    

    


}




?>
#4

Thanks a lot Chief, your solution helped me a lot!!

I wanted to use the CLinkPager in a "Search User" page where the upper part of the page is a form ("user-search-form") where we select criterias to filter the result, and the lower part of the page a DIV ("searchResult") displays the result.

Here was how I solved the problem, hope it can help:

I extended the CLingPager Widget:




<?php

class AjaxFormCLinkPager extends CLinkPager {        

        /**

	 * @var string the id of the DIV to be asynchronously reloaded.

	 */

	public $idDivUpdate;

        /**

	 * @var string the id of the FORM used for criterias

	 */

	public $idForm;


    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::link($label,"#",array('encode'=>false,'onClick'=>

            "jQuery.ajax({'type':'POST','url':'" . $this->createPageUrl($page) . "','cache':false,'data':jQuery('#" . $this->idForm . "').serialize(),'success':function(html){jQuery('#" . $this->idDivUpdate . "').html(html)}}); return false;"

            )).'</li>';

    }        

        

}    

?>

And in my Partial View:




<?php foreach($searchResult as $row): ?>

<div>

    <span><?php echo $row->username; ?></span>

</div>

<?php endforeach; ?>


<?php if(isset($pages)): ?>

    <div style="text-align: center;">

        <?php $this->widget('AjaxFormCLinkPager', array(

            'pages' => $pages,

            'maxButtonCount'=>10,

            'header'=>"",

            'idDivUpdate'=>"searchResult",

            'idForm'=>"user-search-form"

        )) ?>

    </div>

<?php endif; ?>
#5

Hello,

I have issue in pagination.

i have used CLinkPager.

My Controller.




 public function actionJobList()

        {

            $model=new Job;

            $model_jobDetail=new JobDetail;

            

            $model->unsetAttributes();  // clear any default values

            if(isset($_POST['Job']))

		$model->attributes=$_POST['Job'];

                

            $data=$model->searchJobs();

            $detail=$data->getData();

           

         $this->render('jobList',array('model'=>$model,'data'=>$data,'detail'=>$detail,'model_jobDetail'=>$model_jobDetail));

        }

My View File JobList.php.




<div class="block row">

     

    <div class="block-title clearfix">

        <h2>Jobs</h2>

    </div>

     <div class="col-md-12">

        <div class="search-form">

<!-- search-form -->

            <?php $this->renderPartial('_search',array(

                   'model'=>$model,

           )); ?>

      </div>

     </div>

 </div>

<div id="AllJobs" class="row jobnames">


        <?php

        

        $i=0;

        $k=1;

        $oldDate='';

        $newDate='';

       

        foreach($detail as $value)

        {

           

           

            $this->beginWidget('zii.widgets.CPortlet',array(

                        'contentCssClass'=>false,

                        'decorationCssClass'=>FALSE,

                

                         )); 


             $this->renderPartial('_jobList',array('model'=>$model,'value'=>$value,'i'=>$i,'k'=>$k,'model_jobDetail'=>$model_jobDetail));

            $this->endWidget();

            $i++;  

         

        } ?>

                <div class="clearfix"></div>

                <div class="col-sm-6"></div>

        <div class="pager col-sm-6">

      <?php  $this->widget('SimplePager',array('pages'=>$data->pagination,'maxButtonCount'=>2, 

                        'prevPageLabel' => '<i class="fa fa-chevron-left"></i>',

                        'nextPageLabel' => '<i class="fa fa-chevron-right"></i>',

                        'lastPageLabel' => false,

                        'firstPageLabel' => false,

                        'selectedPageCssClass' => 'active',

                        'hiddenPageCssClass' => 'hidden',

                        'header'=>'',

                        'id'=>'link_pager',

                        'idDivUpdate'=>"AllJobs",

                        'idForm'=>"search-form",

                        'htmlOptions'=>array(

                            'class'=>'pagination pagination-sm','style'=>'',)));

         ?>

</div>

    </div>

Extended CLinkPager File.




class SimplePager extends CLinkPager

{

        public $idDivUpdate;

        /**

         * @var string the id of the FORM used for criterias

         */

        public $idForm;

        

         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::link($label,"#",array('encode'=>false,'onClick'=>

            "jQuery.ajax({'type':'POST','url':'" . $this->createPageUrl($page) . "','cache':false,'data':jQuery('#" . $this->idForm . "').serialize(),'success':function(html){jQuery('#" . $this->idDivUpdate . "').html(html)}}); return false;"

            )).'</li>';

                       

                      

         }


}

I want ajax pagination. First page display data properly. but when i click on pagination link it doesn’t update my Data container Div. There is no change at all. i want it to update Div with Id “AllJobs”.

Any solution please?

Thanks in advance.