The use and extension of yii2 paging, the use and extension of yii2 paging

First explain what we are going to talk about in this article

• How to use pagination, teach you step by step
• What attributes can be customized for both the paging classes LinkPager and Pagination
• How to extend the paging class LinkPager to what we need

In the first step, let’s take a look at how to use the paging class that comes with yii2?

1. controller action

<span>use</span><span> yii\data\Pagination;
</span><span>$query</span> = Article::find()->where(['status' => 1<span>]);
</span><span>$countQuery</span> = <span>clone</span> <span>$query</span><span>;
</span><span>$pages</span> = <span>new</span> Pagination(['totalCount' => <span>$countQuery</span>-><span>count</span><span>()]);
</span><span>$models</span> = <span>$query</span>->offset(<span>$pages</span>-><span>offset)
    </span>->limit(<span>$pages</span>-><span>limit)
    </span>-><span>all();
</span><span>return</span> <span>$this</span>->render('index',<span> [
    </span>'models' => <span>$models</span>,
    'pages' => <span>$pages</span>,<span>
]);</span>

2. View

<span>use</span><span> yii\widgets\LinkPager;
</span><span>//</span><span>循環(huán)展示數(shù)據(jù)</span>
<span>foreach</span> (<span>$models</span> <span>as</span> <span>$model</span><span>) {
    </span><span>//</span><span> ......</span>
<span>}
</span><span>//</span><span>顯示分頁(yè)頁(yè)碼</span>
<span>echo</span> LinkPager::<span>widget([
    </span>'pagination' => <span>$pages</span>,<span>
])</span>

The code can basically be completely copied and some data can be modified. I believe most people can understand it.

Let’s look at the second step. What attributes can be defined in the built-in paging class

First let’s talk about the LinkPager component

• The pagination parameter is required, this is an instance of our Pagination class

The default paging class looks like this

• Up and down page buttons and 10 buttons

• First, we change the buttons for the previous and next pages to Chinese

<?= LinkPager::<span>widget([ 
    </span>'pagination' => <span>$pages</span>, 
    'nextPageLabel' => '下一頁(yè)', 
    'prevPageLabel' => '上一頁(yè)',<span> 
]); </span>?>

• If you don’t want to display the previous and next pages, you can set prevPageLabel and nextPageLabel to false

<?= LinkPager::<span>widget([ 
    </span>'pagination' => <span>$pages</span>, 
    'nextPageLabel' => <span>false</span>, 
    'prevPageLabel' => <span>false</span>,<span> 
]); </span>?>

• The home page and last page are not displayed by default. If you need, you can set it like this

<?= LinkPager::<span>widget([ 
    </span>'pagination' => <span>$pages</span>, 
    'firstPageLabel' => '首頁(yè)', 
    'lastPageLabel' => '尾頁(yè)',<span> 
]); </span>?>

• If your data is too small, not enough for 2 pages, paging will not be displayed by default. If you need it, just set hideOnSinglePage=false

<?= LinkPager::<span>widget([ 
    </span>'pagination' => <span>$pages</span>, 
    'hideOnSinglePage' => <span>false</span>,<span> 
]); </span>?>

• The default displayed page number is 10 pages, you can set maxButtonCount to the number of pages you want to display

<?= LinkPager::<span>widget([ 
    </span>'pagination' => <span>$pages</span>, 
    'maxButtonCount' => 5,<span> 
]); </span>?>

• Some people don’t like the default style and want to have their own style for pagination. You can set options. Don’t forget to implement pre, next, disabled and other styles by yourself

<?= LinkPager::<span>widget([ 
    </span>'pagination' => <span>$pages</span>, 
    'options' => ['class' => 'm-pagination'],<span> 
]); </span>?>

Next let’s talk about the Pagination component

The default paging route is as follows, let’s see what we can do

/controller/action?page=2&per-page=20

• First of all, we must specify the total number of items totalCount. Without this parameter, paging cannot be achieved

<span>$pages</span> = <span>new</span><span> Pagination([ 
    </span>'totalCount' => <span>$totalCount</span>,<span> 
]);</span>

• The default number of pages is 20, you can set pageSize to what you want

<span>$pages</span> = <span>new</span><span> Pagination([ 
    </span>'totalCount' => <span>$totalCount</span>, 
    'pageSize' => 5,<span> 
]);</span>

• We can see from the paging route above that the default number per page is per-page. If you don’t want to display this parameter, just set pageSizeParam=false

<span>$pages</span> = <span>new</span><span> Pagination([ 
    </span>'totalCount' => <span>$totalCount</span>, 
    'pageSizeParam' => <span>false</span>,<span> 
]);</span>

• We can also see that the default page depends on the parameter page. If you want to change the parameter to p, just set pageParam=p

<span>$pages</span> = <span>new</span><span> Pagination([ 
    </span>'totalCount' => <span>$totalCount</span>, 
    'pageParam' => 'p',<span> 
]);</span>

• If your pagination exists on the homepage, I believe you definitely want /?p=1 instead of /site/index?p=1. Let’s see how to hide the route

<span>$pages</span> = <span>new</span><span> Pagination([ 
    </span>'totalCount' => <span>$totalCount</span>, 
    'route' => <span>false</span>,<span> 
]);</span>

• Maybe you will find a bug in the paging class Pagination. Suppose we only have 1 page of data, but when we manually change page=20 in the address bar, will the data of page=1 also be displayed? Of course, this is annoying in most interface APIs. However, this is not a bug, but a friendly verification. Set validatePage=false to avoid this problem

<span>$pages</span> = <span>new</span><span> Pagination([ 
    </span>'totalCount' => <span>$totalCount</span>, 
    'validatePage' => <span>false</span>, ]);

Finally, let’s add a new twist and expand its built-in paging! Don’t just stop reading as soon as you see the word “expansion”. Only when you learn to expand can you become stronger and stronger in the future! What kind of expansion method? Let’s change the paging component to a top and bottom page. Please refer to the picture below for comparison

?[Considering that most domestic websites currently collect articles very frequently, and some even do not indicate the source of the original article, the original author hopes that readers can check the original article to prevent any problems and not update all articles to avoid misleading! ]

Continue reading