libro
www.tuyano.com
初心者のためのCakePHP3 プログラミング入門

ページネーション (5/5)

作成:2015-10-10 09:37
更新:2015-10-10 09:37

■Paginatorヘルパー・テンプレートについて

リンクは作成できましたが、作成されるリンクは<li>タグを利用しており、縦一列に並んでしまいます。これではちょっと使いにくいですね。普通は、こうしたリンクは横一列に並んでいるものです。

実は、リンクが使いにくいのは「デフォルトのまま使っている」からです。Paginatorヘルパーにはテンプレート機能があり、テンプレートを用意することで自由にリンクをデザインすることが可能です。

テンプレート機能を使うには、Paginatorヘルパーにテンプレートの設定をしておく必要があります。コントローラーのクラス(ここでは、PersonController)内に、以下のような変数(プロパティ)を用意しておきましょう。
public $helpers = [
    'Paginator' => ['templates' =>
        'paginator-templates']
];

$helpersというのは、ヘルパーに関する設定情報をまとめるプロパティです。ここでは、その'Paginator'に、['templates' => 'paginator-templates'] というように値を設定しています。これで、Paginatorヘルパーにtemplatesという設定がされます。ここでは、'paginator-templates'というテンプレートファイルを設定しています。

では、テンプレートファイルを作成しましょう。下のリスト欄にサンプルを挙げておきます。これを記述し、アプリケーションの「config」フォルダ内に、「paginator-templates.php」という名前でファイルを作成して下さい。

テンプレートが用意できたら、実際にアクセスしてみましょう。今度はページ移動のリンクが横一列に並んで表示されるようになります。

このpaginator-templates.phpでは、さまざまなページ移動リンクで出力されるタグを連想配列にまとめたものをreturnしています。

'prevActive' , 'prevDisabled' ――前のページ用のリンクです。Activeはアクティブ(リンクが使える)とき、Disableは非アクティブ(リンクが不要)なときのタグです。
'nextActive' , 'nextDisabled' ――次のページ用のリンクです。やはりActiveはアクティブ時、Disableは非アクティブ時のタグになります。
'first' , 'last' ――最初のページと最後のページのリンクです。
'number' , 'current' ――ページ番号のリンクです。currentは、現在表示しているページ番号の表示を指定するものです。

これらの値に、出力するタグをテキストとして設定します。テキスト内で、{{url}}{{text}}といった値がありますが、これらはそのリンク用に用意されるURLや表示テキストを示す特殊な値です。これらを使って、出力されるタグを記述すれば、オリジナルなページ移動タグが作れます。

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

<?php
return [
    'prevActive' => '<span class="prev"><a rel="prev" href="{{url}}">{{text}}</a></span> | ',
    'prevDisabled' => '',
    'nextActive' => '<span class="next"><a rel="next" href="{{url}}">{{text}}</a></span>',
    'nextDisabled' => '',
    'first' => '<span class="first"><a rel="first" href="{{url}}">{{text}}</a></span> | ',
    'last' => '<span class="last"><a rel="last" href="{{url}}">{{text}}</a></span>',
    'number' => '<span><a href="{{url}}">{{text}}</a></span> | ',
    'current' => '<span class="current">{{text}}</span> | ',
];

※関連コンテンツ

「初心者のためのCakePHP3 プログラミング入門」に戻る