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

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

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

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

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

ViewでsetTemplate()を使用する

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

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

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

 code
$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>タグで表現されている形です。

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

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

 code
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の中に非常にたくさんのキーがありますね。キー名を見れば、何となく「どこの部分か？」が予想がつきそうです。（わからんかったら、とりあえずためしてみ）

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