How do I Dynamically show the pageSize in yii2? - filter

Question

For now I have set static pagesize in my search function, but now I need to create dropdown for user to change the pagesize from front end. For e.g like 10,20,50,100.
I got the code but it is for yii previous version.

Answer 1

If I had to do it I will use the following approach.
Create a Dropdown for the page sizes, you can adjust the dropdown inside the layout option of the gridview if you want it between summary text and items list or add it before the gridview. like this image, you can wrap it with div to adjust the CSS for it yourself.
The main thing to do is to include the id of the drop-down to the filterSelector option so that every time the gridview is filtered the dropdown value is also submitted and also whenever you change the dropdown.
Your GridView will look like below
GridView::widget([
'dataProvider' => $dataProvider,
'layout'=>'{summary}'.Html::activeDropDownList($searchModel, 'myPageSize', [1 => 10, 2 => 20, 50 => 50, 100 => 100],['id'=>'myPageSize'])."{items}<br/>{pager}",
'filterModel' => $searchModel,
'filterSelector' => '#myPageSize',
'columns'=>[
// your column configurations.......
]
]);
Declare a public property in the searchModel
public $myPageSize
Add that property to the safe rules inside your searchModel
[['myPageSize'],'safe']
And then update you search() method inside the relative SearchModel you are using with the GridView. You should assign the pageSize option of the query inside the $dataProvider with the new property defined but make sure you add this line after the $this->load($params) statement.
See below
$dataProvider->pagination->pageSize = ($this->myPageSize !== NULL) ? $this->myPageSize : 10;`
Here we are setting the default page size equal to the minimum option inside the drop-down we created, otherwise it would be updated when ever you change the dropdown.
Now try changing the dropdown you will see it working. Hope this helps

Answer 2

Thank you Muhammad!
Your answer helped me, but on the layout I had to modify the array for the select:
Where you have "1 => 10, 2 => 20," I had to change it to "10 => 10, 20 => 20,". Otherwise it pagination goes one by one or two by two.
It ended up like this:
'layout'=>'{summary}'.Html::activeDropDownList($searchModel, 'myPageSize', [10 => 10, 20 => 20, 50 => 50, 100 => 100],['id'=>'myPageSize'])."{items}<br/>{pager}",
The rest worked perfect!