[Cakephp4]ページネートのスタイルを自由にカスタマイズ

WEB開発を行っていく上で、ページネート機能を使う事はほぼ必須といってもよいぐらい、スタンダードな機能です。

フレームワークはそんな「よく使う機能」を簡単に提供してくれる便利なものですが、時に不要なタグ出力や、機能まで実装されてしまうものもあります。

 

Cakephp では、ページネート機能は非常に簡単に実装できるものですが、時にスタイルと違ったタグ出力がされるので、初心者の方には扱いづらいかもしれません。

本記事では自由にカスタマイズする方法を見ていきましょう。

 

ViewでsetTemplate()を使用する

ページネートのタグ出力をカスタマイズするためには、setTemplate()を使用します。これは、Formヘルパーをカスタマイズしたい時と同様です。

ちなみに Form ヘルパーのカスタマイズは以下に記事があります。

以下、Viewファイルで setTemplate() を使用する例です。

$this->Paginator->setTemplates([
    'prevActive' => '<li><a href="{{url}}">{{text}}</a></li>',
    'prevDisabled' => '<li>{{text}}</li>',
    'nextActive' => '<li><a href="{{url}}">{{text}}</a></li>',
    'nextDisabled' => '<li>{{text}}</li>',
]);

上記コードを説明すると、prev が前、next が次ですね。アクティブな場合と、非アクティブな場合のタグ出力が <li>タグで表現されています。

任意にタグ自体を変更してもよいでしょう。波括弧の箇所は動的に URL が変更する箇所なので基本的には必要かと思います。

スタイルをカスタマイズするためには、大抵の場合、スタイルシートで class 指定されていると思うので、<li>タグにclass="hoge" などと指定してあげれば、スタイルを適用できます。

他にも、たくさんの要素を指定できます。Cakephp4本体 から引用します。

protected $_defaultConfig = [
    'options' => [],
    'templates' => [
        'nextActive' => '<li class="next"><a rel="next" href="{{url}}">{{text}}</a></li>',
        'nextDisabled' => '<li class="next disabled"><a href="" onclick="return false;">{{text}}</a></li>',
        'prevActive' => '<li class="prev"><a rel="prev" href="{{url}}">{{text}}</a></li>',
        'prevDisabled' => '<li class="prev disabled"><a href="" onclick="return false;">{{text}}</a></li>',
        'counterRange' => '{{start}} - {{end}} of {{count}}',
        'counterPages' => '{{page}} of {{pages}}',
        'first' => '<li class="first"><a href="{{url}}">{{text}}</a></li>',
        'last' => '<li class="last"><a href="{{url}}">{{text}}</a></li>',
        'number' => '<li><a href="{{url}}">{{text}}</a></li>',
        'current' => '<li class="active"><a href="">{{text}}</a></li>',
        'ellipsis' => '<li class="ellipsis">&hellip;</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>',
    ],
];

templates 配列の中にたくさんのキーがあります。キー名を見れば、何となく「どこの部分か？」が予想がつきそうです。

これで自由にページネートのスタイルをカスタマイズできます。不要なタグであれば、削除すればよいだけですね！