[Ken Rodriguez]

Hi,

Is there any way I can achieve pagination that uses a dropdown and two buttons (next & previous)?

Attached File(s)

•  Capture.JPG (8.92K)
  Number of downloads: 11

[thiagovidal]

Ken Rodriguez, on 06 January 2013 - 10:06 PM, said:

Hi,

Is there any way I can achieve pagination that uses a dropdown and two buttons (next & previous)?

Hey. Are u still looking for this answer?

Mike already solved that a while ago... check this thread - http://www.yiiframew...hp?/topic/8994-

[seenivasan]

Dear Friend

I do not know whether there is any extension available for this purpose.

I have made a successful attempt on this.

Yet still it is primitive and can be refined further.

I have created a custom class for pager and placed inside the components folder.

class DropPager extends CBasePager
{
	public function run()
	{//creating dropDownList and next and previous buttons.
	echo CHtml::button("<Previous",array("id"=>"prev","disabled"=>$this->currentPage==0?true:false));
        echo CHtml::dropDownList("value",$this->currentPage+1,$this->getPageArray(),array("id"=>"drop"));
        echo CHtml::button("Next>",array("id"=>"next","disabled"=>$this->currentPage+1!==$this->pageCount?false:true));
        $this->registerScript();
	}
	
	public function getPageArray() //generating source array for dropdownlist.
	{   $arr=array();
		for($i=1;$i<=$this->pageCount;$i++)
		{
			$arr[$i]=$i;
		}
		
		return $arr;	
	}	
	
	public function registerScript()
        {
	    Yii::app()->clientScript->registerScript('test','

	    function updateGrid()
	    {	
		var val=$("#drop").val();
		$("#drop").parent().parent().yiiGridView("update",{data:{'.$this->pages->pageVar.':val}});			
	    }
		
	    $("body").on("change","#drop",updateGrid);	
		
	    $("body").on("click","#next",function(){
			$("#drop").val(parseFloat($("#drop").val()) +1);
			updateGrid();
			});
			
	    $("body").on("click","#prev",function(){
			$("#drop").val($("#drop").val()-1);
			updateGrid();
			});
		
		');
	}
}

In the above script I am selecting the grid element by

$("#drop").parent().parent().

Kindly check by looking at html elements in your case.

Now in admin.php we have declare the two things.
1.template
2.pager class.

admin.php

<?php $this->widget('zii.widgets.grid.CGridView', array(
	'id'=>'person-grid',
	'dataProvider'=>$model->search(),
	'filter'=>$model,
	"template"=>"\n{pager}{summary}\n{items}",//to lift the pager on th top of the grid.
	'pager'=>'DropPager',                      //Our new pager class.
	'columns'=>array(
		'id',
		'name',
		'designation',
		array(
			'class'=>'CButtonColumn',
		),
	),
)); ?>

This is not a complete solution.
It is not replacement for CLinkPager.

The beutiful thing about CLinkPager is that it works even AJAX is disabled.

My DropPager can be refined to a greater extent.

This is screenshot of a grid with pageSize 4 from my localhost.
 drop.png (23.52K)
Number of downloads: 7

Regards.

[morteza toloo]

Thanks to seenivasan. pretty good solution.
I had changed yours and mixed up with page size solution at DropDown for pageSize in CGridView.
So you will have a component which has both page size and page number with dropDowns.
Also an optimization is done for huge data. seenivasan solution produce a very large drop down includes page numbers. My optimization will generate page numbers as: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 21, 31, 41, 51, 61, 71, 81, 91, 101, 201, 301, ..... unless values around current page.

Here is the component source:

<?php

class DropPager extends CBasePager {

    public function run() {//creating dropDownList and next and previous buttons.
        echo Yii::t('main', 'Page Number:');
        echo CHtml::button("<Previous", array("id" => "prev", "disabled" => $this->currentPage == 0 ? true : false));
        echo CHtml::dropDownList("pageNumber", $this->currentPage + 1, $this->getPageArray(), array("id" => "pageNumberDrop"));
        echo CHtml::button("Next>", array("id" => "next", "disabled" => $this->currentPage + 1 !== $this->pageCount ? false : true));
        echo "&nbsp;|&nbsp;";
        echo Yii::t('main', 'Page Size:');
        echo CHtml::dropDownList("pageSize", $this->pageSize, $this->getPageSizeArray(), array("id" => "pageSizeDrop"));
        $this->registerScript();
    }

    public function getPageArray() { //generating source array for dropdownlist.
        $arr = array();
        $step = 1;
        for ($i = 1; $i <= $this->pageCount; $i+= $step) {
            if ($i >= $this->currentPage - 10 && $i - $step < $this->currentPage)
            {
                $start = max(array($this->currentPage - 10, 1));
                $finish= min(array($this->pageCount, $this->currentPage + 10));
                for ($i = $start; $i < $finish ; $i++) {
                    $arr[$i] = $i;
                }
            }
            if ($step * 10 < $i) $step *= 10;
            $arr[$i] = $i;
        }

        return $arr;
    }
    
    private function getPageSizeArray() {
        $result = array(5 => 5, 10 => 10, 20 => 20, 50 => 50, 100 => 100);
        return $result;
    }

    public function registerScript() {
        Yii::app()->clientScript->registerScript('dropPager', '
            function updateGrid()
            {   
                pageNumber= parseInt($("#pageNumberDrop").val());
                var pageSize = $("#pageSizeDrop").val();
                var $x = $("#pageNumberDrop").parent().parent().yiiGridView("update",{data:{' . 
                $this->pages->pageVar . ':pageNumber, ' .
                'pageSize:pageSize}});
            }
                
            $("body").on("change","#pageNumberDrop",updateGrid);  
            $("body").on("change","#pageSizeDrop",updateGrid);  
                
            $("body").on("click","#next",function(){
                        $("#pageNumberDrop").val(parseFloat($("#pageNumberDrop").val()) +1);
                        updateGrid();
                        });
                        
            $("body").on("click","#prev",function(){
                        $("#pageNumberDrop").val($("#pageNumberDrop").val()-1);
                        updateGrid();
                        });
                
                ');
    }

}

?>

In actionAdmin() at controller:

if (isset($_GET['pageSize'])) {
    Yii::app()->user->setState('pageSize',(int)$_GET['pageSize']);
    unset($_GET['pageSize']);  // would interfere with pager and repetitive page size change
}

In search() method at model:

return new CActiveDataProvider(get_class($this),array(
    'pagination'=>array(
        'pageSize'=> Yii::app()->user->getState('pageSize'),
    ),
    'criteria'=>$criteria,
));

Now you just should set the pager of CGrid view in admin view:

<?php $this->widget('zii.widgets.grid.CGridView', array(
        'id'=>'person-grid',
        'dataProvider'=>$model->search(),
        'filter'=>$model,
        "template"=>"\n{pager}{summary}\n{items}",//to lift the pager on th top of the grid.
        'pager'=>'DropPager',                      //Our new pager class.
        'columns'=>array(
                'id',
                'name',
                'designation',
                array(
                        'class'=>'CButtonColumn',
                ),
        ),
)); ?>