Изменение постраничной навигации в Yii2



Как и в первой версии фреймворка, Yii использует встроенный виджет для создания постраничной навигации. По умолчанию, при выводе страницы находятся в ul>li. Предположим, что нам нужно, чтобы ссылки на страницы были в div’е, вместо ul>li. Для этого нужно переопределить класс LinkPager.

По умолчанию, вывод постраничной навигации в Yii2 делается так:

SiteController.php

public function actionIndex()
{
    $query = Post::find();
    $countQuery = clone $query;
    $pages = new Pagination(['totalCount' => $countQuery->count()], , 
        'pageSize'=>5, 'defaultPageSize'=>5
);
    $posts = $query->offset($pages->offset)
        ->limit($pages->limit)
        ->all();

    return $this->render('index', [
         'posts' => $posts,
         'pages' => $pages,
    ]);
}

index.php

foreach ($posts as $post) {
    //Вывод данных поста.
}
//Виджет, который выводит странцы
echo \yii\widgets\LinkPager::widget([
    'pagination' => $pages,
]);

Создадим класс frontend/components/MyPager.php, в нем мы и будем переопределять LinkPager. За рендеринг кнопок отвечают 2 метода: renderPageButton() и renderPageButtons(). Меняем, в них ul на div, а li на span. В итоге, должно получиться:

MyPager.php

<?php
namespace frontend\components;

use Yii;
use yii\base\InvalidConfigException;
use yii\helpers\Html;
use yii\base\Widget;
use yii\data\Pagination;

class MyPager  extends \yii\widgets\LinkPager
{

   protected function renderPageButton($label, $page, $class, $disabled, $active)
   {
       $options = ['class' => $class === '' ? null : $class];
       if ($active) {
           Html::addCssClass($options, $this->activePageCssClass);
       }
       if ($disabled) {
           Html::addCssClass($options, $this->disabledPageCssClass);

           return  Html::tag('span', $label);
       }
       $linkOptions = $this->linkOptions;
       $linkOptions['data-page'] = $page;

       return Html::a($label, $this->pagination->createUrl($page), $linkOptions);
   }


   protected function renderPageButtons()
   {
       $pageCount = $this->pagination->getPageCount();
       if ($pageCount < 2 && $this->hideOnSinglePage) {
           return '';
       }

       $buttons = [];
       $currentPage = $this->pagination->getPage();

       // first page
       $firstPageLabel = $this->firstPageLabel === true ? '1' : $this->firstPageLabel;
       if ($firstPageLabel !== false) {
           $buttons[] = $this->renderPageButton($firstPageLabel, 0, $this->firstPageCssClass, $currentPage <= 0, false);
       }

       // prev page
       if ($this->prevPageLabel !== false) {
           if (($page = $currentPage - 1) < 0) {
               $page = 0;
           }
           $buttons[] = $this->renderPageButton($this->prevPageLabel, $page, $this->prevPageCssClass, $currentPage <= 0, false);
       }

       // internal pages
       list($beginPage, $endPage) = $this->getPageRange();
       for ($i = $beginPage; $i <= $endPage; ++$i) {
           $buttons[] = $this->renderPageButton($i + 1, $i, null, false, $i == $currentPage);
       }

       // next page
       if ($this->nextPageLabel !== false) {
           if (($page = $currentPage + 1) >= $pageCount - 1) {
               $page = $pageCount - 1;
           }
           $buttons[] = $this->renderPageButton($this->nextPageLabel, $page, $this->nextPageCssClass, $currentPage >= $pageCount - 1, false);
       }

       // last page
       $lastPageLabel = $this->lastPageLabel === true ? $pageCount : $this->lastPageLabel;
       if ($lastPageLabel !== false) {
           $buttons[] = $this->renderPageButton($lastPageLabel, $pageCount - 1, $this->lastPageCssClass, $currentPage >= $pageCount - 1, false);
       }

       return Html::tag('div', implode("\n", $buttons), $this->options);
   }
}

Теперь, вместо:

echo \yii\widgets\LinkPager::widget([
    'pagination' => $pages,
]);

Можно прописать наш класс:

echo \frontend\components\MyPager::widget([
   'pagination' => $pages,
]);

После изменения, постраничная навигация будет в следующем виде:

<div class="pagination"><span>←</span>
    <a href="/blog?page=1" data-page="0">1</a>
    <a href="/blog?page=2" data-page="1">2</a>
    <a href="/blog?page=2" data-page="1">→</a>
</div>

Подробнее, о том, как работает LinkPager, можно ознакомиться в официальной документации. На момент, написания статьи, актуальная версия фреймворка — 2.0.6.



Теги:

Оставить комментарий