サーバサイドは CakePHP3 、フロントエンドは Bootstrap 4 というプロジェクトのお手伝いで久々に CakePHP を使っています。CakePHP3 + Bootstrap4 のページ送り（Pagenation） を実装することがあり、CakePHP2 から（良い意味で）変わっていたので実装方法をメモします。
下準備
Bootstrap4 Pagination
まず公式ドキュメントでBootstrap4 PaginationのHTMLの構造と属性値ルールを確認。CakePHP3のテンプレートでこれに準じる出力を行うのがゴールになります。
https://getbootstrap.com/docs/4.0/components/pagination/
|
1 2 3 4 5 6 7 8 9 |
<nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> </nav> |
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 を使う場合は下記のようになります。
|
1 |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> |
※CDN の詳細は http://getbootstrap.com/ を参照。
2. テンプレート設定の作成
config/paginator-templates.php というページネーションのテンプレート設定を作成。デフォルト・テンプレート設定は下記のファイルにあるので、それをベース組むとよさそうです。
vendor/cakephp/cakephp/src/View/Helper/PaginatorHelper.php
config/paginator-templates.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?php return [ 'nextActive' => '<li class="page-item"><a class="page-link" rel="next" href="{{url}}">{{text}}</a></li>', 'nextDisabled' => '<li class="page-item disabled"><span class="page-link">{{text}}</span></li>', 'prevActive' => '<li class="page-item"><a class="page-link" rel="prev" href="{{url}}">{{text}}</a></li>', 'prevDisabled' => '<li class="page-item disabled"><span class="page-link">{{text}}</span></li>', 'counterRange' => '{{start}} - {{end}} of {{count}}', 'counterPages' => '{{page}} of {{pages}}', 'first' => '<li class="page-item"><a class="page-link" href="{{url}}">{{text}}</a></li>', 'last' => '<li class="page-item"><a class="page-link" href="{{url}}">{{text}}</a></li>', 'number' => '<li class="page-item"><a class="page-link" href="{{url}}">{{text}}</a></li>', 'current' => '<li class="page-item active"><a class="page-link" href="">{{text}}</a></li>', 'ellipsis' => '<li class="page-item"><span class="page-link">…</span></li>', 'sort' => '<a href="{{url}}">{{text}}</a>', 'sortAsc' => '<a class="asc" href="{{url}}">{{text}}</a>', 'sortDesc' => '<a class="desc" href="{{url}}">{{text}}</a>', 'sortAscLocked' => '<a class="asc locked" href="{{url}}">{{text}}</a>', 'sortDescLocked' => '<a class="desc locked" href="{{url}}">{{text}}</a>', ]; |
3. テンプレート設定を適用
1. で作ったテンプレート設定を適用する方法は２通りあり、どちらの方法でもＯＫです。
方法その1 – AppView で設定
公式ドキュメントにあるように src/View/AppView.php のinitializeメソッドで読み込みます。
src/View/AppView.php
|
1 2 3 4 5 6 |
public function initialize() { // ページ送り独自テンプレート設定の読み込み config/paginator-templates.php // .php は不要！ $this->loadHelper('Paginator', ['templates' => 'paginator-templates']); } |
ウェブサイト全体のページネーションが統一されている場合はこの方法がベターです。
方法その3 – コントローラ単位で設定
コントローラ単位で読み込むことも可能になっています。下記のようにインスタンス変数 $helpers に設定を追加すれば適用されます。
src/Controller/HogeController.php
|
1 2 3 4 5 6 7 8 9 10 |
class HogeController extends AppController { public $helpers = [ // ページ送り独自テンプレートの読み込み config/paginator-templates.php // .php は不要！ 'Paginator' => ['templates' => 'paginator-templates'], ]; // ... 省略 ... // } |
4. ビューファイル（テンプレートファイル）
最後にビュー（テンプレート）の表示したいところに出力すればページ送りが表示されます。
src/Template/Hoge/index.ctp
|
1 2 3 4 5 |
<ul class="pagination"> <?= $this->Paginator->prev(); ?> <?= $this->Paginator->numbers(['modulus' => 2]); ?> <?= $this->Paginator->next(); ?> </ul> |
実際のキャプチャー（画像）
以上 CakePHP3 のPaginator を Bootstrap4 Pagination に対応させる方法でした。
