
WEB開発を行っていく上で、ページネート機能を使う事はほぼ必須といってもよいぐらい、スタンダードな機能です。
フレームワークはそんな「よく使う機能」を簡単に提供してくれる便利なものですが、時に不要なタグ出力や、機能まで実装されてしまうものもあります。
Cakephpでは、ページネート機能は非常に簡単に実装できるものですが、時にスタイルと違ったタグ出力がなされるので、初心者の方には使いづらいかもしれません。
自由にカスタマイズする方法を見ていきましょう。
ViewでsetTemplate()を使用する
ページネートをカスタマイズするためには、setTemplate()
を使用します。これは、Formヘルパーをカスタマイズしたい時と同様ですね。
ちなみにFormヘルパーのカスタマイズは以下に記事があります。
-
-
[Cakephp3]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">…</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の中に非常にたくさんのキーがありますね。キー名を見れば、何となく「どこの部分か?」が予想がつきそうです。(わからんかったら、とりあえずためしてみ)
これで自由にページネートのスタイルをカスタマイズできます。不要なタグであれば、削除すればよいだけですね!