Hi,
Is there any way I can achieve pagination that uses a dropdown and two buttons (next & previous)?
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.yiiframework.com/forum/index.php?/topic/8994-
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.
3821
Regards.
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 " | ";
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',
),
),
)); ?>