Custom Page Size for CGridView

Yii FrameworkThis post is actually something that, after permission granted from a Yii collegue Mike, was posted on Yii forum and I thought that was a *golden hint* too bad not to be shared among people interested on Yii: How to include a custom page size select box on your CGridView.

Step 1

First we need to modify the actionAdmin of the (CRUD) controller we want to include the select box that will change the page size of our CGridView. For the sake of this example, we are going to use the user controller which is created by default with Yii.

//
// page size drop down changed
if (isset($_GET['pageSize'])) {
//
// pageSize will be set on user's state
Yii::app()->user->setState('pageSize',(int)$_GET['pageSize']);
//
// unset the parameter as it
// would interfere with pager
// and repetitive page size change
unset($_GET['pageSize']);
}

Step 2

Now we have to modify the model’s search() function (e.g. model/User.php):

return new CActiveDataProvider(get_class($this),array(
'pagination'=>array(
//
// please check how we get the
// the pageSize from user's state
'pageSize'=> Yii::app()->user->getState('pageSize',
//
// we have previously set defaultPageSize
// on the params section of our main.php config file
Yii::app()->params['defaultPageSize']),
),
'criteria'=>$criteria,
));

Step 3

Finally, we need to change our view (e.g. views/user/admin.php) and we are done:

//
//
$pageSize=Yii::app()->user->getState('pageSize',Yii::app()->params['defaultPageSize']);
// we use header of button column for the drop down
// so change the CButtonColumn in columns array like this:
...
array(
    'class'=>'CButtonColumn',
    'header'=>CHtml::dropDownList('pageSize',
        $pageSize,
        array(20=>20,50=>50,100=>100),
        array(
       //
       // change 'user-grid' to the actual id of your grid!!
        'onchange'=>
        "$.fn.yiiGridView.update('user-grid',{ data:{pageSize: $(this).val() }})",
    )),
),
...

Hope you find this hint as good as I thought it is. As Mike states, this information is to prove how easy is to enhance Yii components if you are not afraid of Javascript.

References

For futher reading please refer to original post.
Mike’s Forum Post

Happyiing!
[ad]

9 thoughts on “Custom Page Size for CGridView

  1. Hi Antonio, thanks for shared this post.

    Firts, in step 3, this code:

    //
    user->getState('pageSize',Yii::app()->params['defaultPageSize']);
    ...
    

    should be:

    //
    $pageSize=Yii::app()->user->getState('pageSize',Yii::app()->params['defaultPageSize']);
    

    Second, i have a problem, when i select one option in dropdown, (20 to 100) no problem but when i select (100 to 20) then no refresh the number in dropdown and no change the size search.

    which may be the problem?

    Thanks for you help me.

  2. That was awesome. I’ve found a lot of stuff concerning Yii page size, but this is the simplest and extension-free solution that I was looking for. Great job, man!

Leave a Reply

Your email address will not be published. Required fields are marked *