CakePHP3 の Paginator を Bootstrap4 に対応させる方法

サーバサイドは CakePHP3 、フロントエンドは Bootstrap 4 というプロジェクトのお手伝いで久々に CakePHP を使っています。CakePHP3 + Bootstrap4 のページ送り(Pagenation) を実装することがあり、CakePHP2 から(良い意味で)変わっていたので実装方法をメモします。

下準備

Bootstrap4 Pagination

まず公式ドキュメントでBootstrap4 PaginationのHTMLの構造と属性値ルールを確認。CakePHP3のテンプレートでこれに準じる出力を行うのがゴールになります。
https://getbootstrap.com/docs/4.0/components/pagination/

 

CakePHP3 Paginator

CakePHP2 の Paginator はHTMLの調整が困難でしたが、CakePHP3 ではテンプレート化されて柔軟かつきれい保つことができるようです。
https://book.cakephp.org/3.0/ja/views/helpers/paginator.html

公式ドキュメントより下記記事の方がわかりやすい!
CakePHP3のPaginator独自タグの設定が楽になった! – Qiita

 

実装サンプル

実際に実装してみましょう。

1. Bootstrap4 の読み込み

Bootstrap4 のCSS(bootstrap.min.css)を読み込んでおきましょう。サーバ内設置でももちろんOKですが、CDN を使う場合は下記のようになります。

※CDN の詳細は http://getbootstrap.com/ を参照。

2. テンプレート設定の作成

config/paginator-templates.php というページネーションのテンプレート設定を作成。デフォルト・テンプレート設定は下記のファイルにあるので、それをベース組むとよさそうです。
vendor/cakephp/cakephp/src/View/Helper/PaginatorHelper.php

config/paginator-templates.php

3. テンプレート設定を適用

1. で作ったテンプレート設定を適用する方法は2通りあり、どちらの方法でもOKです。

方法その1 – AppView で設定

公式ドキュメントにあるように src/View/AppView.php のinitializeメソッドで読み込みます。

src/View/AppView.php

ウェブサイト全体のページネーションが統一されている場合はこの方法がベターです。

方法その3 – コントローラ単位で設定

コントローラ単位で読み込むことも可能になっています。下記のようにインスタンス変数 $helpers に設定を追加すれば適用されます。

src/Controller/HogeController.php

4. ビューファイル(テンプレートファイル)

最後にビュー(テンプレート)の表示したいところに出力すればページ送りが表示されます。

src/Template/Hoge/index.ctp

実際のキャプチャー(画像)

CakePHP3 , Bootstrap4 Pagination Example

以上 CakePHP3 のPaginator を Bootstrap4 Pagination に対応させる方法でした。