Главная > Блог > Web-разработка > Yii2 и Laravel >

Yii2. Постраничная навигация

13.05.2019

Теги: URL • Web-разработка • Yii2 • Класс • Навигация • ПостраничнаяНавигация • Теория • Фреймворк

Для создания постраничной навигации в Yii2 предназначен класс Pagination. Использование данного класса может потребоваться там, где присутствуют большие массивы данных. Это может быть каталог товаров, лента новостей, записи блога и так далее.

К примеру, давайте выведем все записи блога:

<?php
namespace app\controllers;

use yii\web\Controller;
use app\models\Post;

class BlogController extends Controller {
    public function actionIndex() {
        $posts = Post::find()->all();
        return $this->render('index', compact('posts'));
    }
}

И в view-шаблоне выведем полученные данные с нужным оформлением:

<?php
/* @var $this yii\web\View */

use yii\helpers\Html;

$this->title = 'Записи блога'
?>

<?php foreach($posts as $post): ?>
    <div class="panel panel-default">
        <div class="panel-heading"><?= Html::encode($post->title); ?></div>
        <div class="panel-body"><?= Html::encode($post->excerpt); ?></div>
    </div>
<?php endforeach; ?>

Если записей достаточно большое количество, то такая страница будет загружаться очень долго. Для таких случаев как раз и необходима постраничная разбивка данных, когда на первой странице представлена первая «порция» данных, а на следующие «порции» мы даем ссылки.

Давайте немного перепишем код получения данных, обратившись к классу Pagination:

<?php
namespace app\controllers;

use yii\web\Controller;
use app\models\Post;
use yii\data\Pagination;

class BlogController extends Controller {
    public function actionIndex() {
        // $posts = Post::find()->all();
        $query = Post::find();
        $pages = new Pagination(['totalCount' => $query->count(), 'pageSize' => 5]);
        $posts = $query->offset($pages->offset)
                       ->limit($pages->limit)
                       ->all();
        return $this->render('index', compact('posts', 'pages'));
    }
}

В представление добавим использование виджета LinkPager, который построит постраничную навигацию:

<?php
/* @var $this yii\web\View */

use yii\helpers\Html;
use yii\widgets\LinkPager;

$this->title = 'Записи блога'
?>

<?php foreach($posts as $post): ?>
    <div class="panel panel-default">
        <div class="panel-heading"><?= Html::encode($post->title); ?></div>
        <div class="panel-body"><?= Html::encode($post->excerpt); ?></div>
    </div>
<?php endforeach; ?>

<nav aria-label="Постраничная навигация">
    <?= LinkPager::widget(['pagination' => $pages]); ?>
</nav>

И в итоге мы получим теперь только часть данных, а следующие части будут доступны по ссылкам сгенерированной постраничной навигации.

<nav aria-label="Постраничная навигация">
    <ul class="pagination">
        <li class="prev"><a href="/blog/index?page=1&amp;per-page=5" data-page="0">&laquo;</a></li>
        <li><a href="/blog/index?page=1&amp;per-page=5" data-page="0">1</a></li>
        <li class="active"><a href="/blog/index?page=2&amp;per-page=5" data-page="1">2</a></li>
        <li><a href="/blog/index?page=3&amp;per-page=5" data-page="2">3</a></li>
        <li><a href="/blog/index?page=4&amp;per-page=5" data-page="3">4</a></li>
        <li class="next"><a href="/blog/index?page=3&amp;per-page=5" data-page="2">&raquo;</a></li>
    </ul>
</nav>

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

http://server.com/blog/index?page=3&per-page=5

Давайте изменим это, чтобы ссылки имели вид:

http://server.com/blog/page/3

Для этого добавим еще пару параметров к настройкам:

$pages = new Pagination([
    'totalCount' => $query->count(),
    'pageSize' => 5,
    'forcePageParam' => false,
    'pageSizeParam' => false
]);

И пару правил для маршрутов в файл config/web.php:

$config = [
    /*...*/
    'components' => [
        /*...*/
        'urlManager' => [
            'enablePrettyUrl' => true,
            'showScriptName' => false,
            'rules' => [
                'blog/page/<page:\d+>' => 'blog/index',
                'blog' => 'blog/index'
            ],
        ],
    ],
    /*...*/
];

Поиск: URL • Web-разработка • Yii2 • Навигация • Фреймворк • Pagination • Постраничная навигация • LinkPager • Виджет • Widget • Класс • Class