ページネーションの作り方(CakePHP3 + Bootstrap)

はじめに

今回は CakePHP3 + Bootstrap という構成でページネーションを作る方法をお伝えします。

下記の記事を参考にさせていただきました。

https://tt-computing.com/cake4-bootstrap4-paginator

結論

基本的には公式ドキュメントに沿って必要な記述を追記していきます。

https://book.cakephp.org/3/ja/controllers/components/pagination.html

手順1. AppView.php に追記

src/view/AppView.php に以下の通り追記します。

src/view/AppView.php
public function initialize()
{
    $this->loadHelper('Paginator', ['templates' => 'paginator-templates']); // 追記
}

これでアプリケーション全体でページネーションが使用可能になりました。

手順2. paginator-templates.php 作成

config/paginator-templates.php を作成し、以下の通り記述します。

config/paginator-templates.php
<?php
return [
    'number' => '<li class="page-item"><a class="page-link" href="{{url}}">{{text}}</a></li>',
    'current' => '<li class="page-item active"><span class="page-link">{{text}} <span class="sr-only">(current)</span></span></li>',
    'ellipsis' => '<li class="page-item disabled"><span class="page-link">...</span></li>',
    'prevActive' => '<li class="page-item"><a class="page-link" href="{{url}}">{{text}}</a></li>',
    'prevDisabled' => '<li class="page-item disabled"><span class="page-link">{{text}}</span></li>',
    'nextActive' => '<li class="page-item"><a class="page-link" href="{{url}}">{{text}}</a></li>',
    'nextDisabled' => '<li class="page-item disabled"><span class="page-link">{{text}}</span></li>',
];

これでページネーションのテンプレートができました。

手順3. $paginate を定義

クラス変数として$paginateを定義します。

Controller
...
class XXXController extends AppController
{
    // ↓ 定義
    public $paginate = [
        'limit' => 10,
    ];

この値がデフォルト値になります。

今回は表示件数の上限を10に設定しました。

手順4. Paginatorコンポーネントの読み込み

続いてPaginatorコンポーネントを読み込みます。

Controller
public function initialize()
{
    $this->loadComponent('Paginator');

今回は全アクションで使用することを想定し、initializeで読み込みました。

手順5. データ指定

findの結果をpaginateメソッドの引数に指定します。

Controller
$result = $this->モデル->find()
...;

$this->set('result', $this->paginate($result));

手順6. ページネーションを表示

ビューテンプレート内でページネーションを表示します。

Template
<nav aria-label="Page navigation example">
    <ul class="pagination">
        <?= $this->Paginator->prev('Prev') ?>
        <?= $this->Paginator->numbers([
            'first' => 2,
            'modulus' => 2,
            'last' => 2
        ]) ?>
        <?= $this->Paginator->next('Next') ?>
    </ul>
</nav>

オプションの意味は以下の通りです。

first 先頭ページへのリンクを生成したい場合、先頭から何ページ分を生成するかを整数で指定します。 デフォルトは false です。文字列を指定すると、その文字列をタイトルの値として先頭ページへのリンクを生成します。

modulus 現在のページの両側に含める数字の数。 デフォルトは 8。

last 最終ページヘのリンクを生成したい場合、最後から何ページ分を生成するかを整数で定義します。 デフォルトは false です。 first オプションと 同じロジックに従います。 last() メソッドを使って別々に定義することも可能です。

以上の手順でページネーションを作成することができます！

おわりに

ページネーションの基本的な処理はCakePHPが標準で用意してくれているので、とても楽に作成することができます。

もっと詳しく知りたい方はぜひ公式ドキュメントをご一読ください！

https://book.cakephp.org/3/ja/controllers/components/pagination.html

それでは。