タグ : Paginator

CakePHPのページャーでnumbersメソッドを色々カスタマイズしたい

CakePHPで、データの一覧画面を作成する際に

Paginatorを利用すると非常に便利です。

bakeでビューファイルを生成すると、

以下のようなタグが生成されます。

<p>
<?php
echo $this->Paginator->counter(array(
'format' => __('Page {:page} of {:pages}, showing {:current} records out of {:count} total, starting on record {:start}, ending on {:end}')
));
?>
</p>
<div class="paging">
<?php
  echo $this->Paginator->prev('< ' . __('previous'), array(), null, array('class' => 'prev disabled'));
  echo $this->Paginator->numbers(array('separator' => ''));
  echo $this->Paginator->next(__('next') . ' >', array(), null, array('class' => 'next disabled'));
?>
</div>

前半分は、全○ページの○ページ目、全○件のうち○件表示・・・というような情報を表示します。

それぞれ、以下の情報を表示します。

{:page} 現在のページ
{:pages} 全ページ数
{:current} 表示件数
{:count} 全レコード数
{:start} 表示開始レコード番号
{:end} 表示終了レコード番号

後半の

<div class="paging">
~
</div>

の部分が

ページャーを表示する部分です。

デザイナーさんにサイトデザインをお願いした場合、

ページャーをカッコよく仕上げてくれることが結構あります。

カッコいい分、Paginatorを使って実装し辛かったりします。

今回はテーブルタグを使ったHTMLの対応を行ったので、対応方法をメモ。

<table class="page_n">
<tr>
<td class="arrow">&lt;</td>
<td><a href="#">1</a></td>
<td><a href="#">2</a></td>
<td><a href="#">3</a></td>
<td><a href="#">4</a></td>
<td class="active"><a href="#">5</a></td>
<td class="arrow"><a href="#">&gt;</a></td>
</tr>
</table>

(CSSは省略します)

「前へ」の

<td class="arrow">&lt;</td>


「次へ」の

<td class="arrow"><a href="#">&gt;</a></td>

以下のように実装しました。

■前へ
<td class="arrow"><?php echo $this->Paginator->prev(__('<'), array(), null, array('class' => 'arrow disabled')); ?></td>

■次へ
<td class="arrow"><?php echo $this->Paginator->next(__('>'), array(), null, array('class' => 'arrow disabled')); ?></td>

数字部分は以下のようにしました。

<?php echo $this->Paginator->numbers(array('separator' => '', 'tag'=>'td', 'currentClass'=>'active', 'modulus'=>10, 'first' => '先頭へ', 'last'=>'末尾へ')); ?>

separatorで、区切り文字を指定します。

tagで、数字を囲むタグを指定できます。今回の場合はtdタグで囲みます。

currentClassで、現在ページの場合のclassを指定できます。

現在ページの色等を変えたい場合に利用できます。

modulusで、表示するページ番号の数を指定できます。

first、lastは、先頭ページに戻る、末尾ページに移動する際に利用できます。

全ページ数がmodulusで指定したページ数を超える場合に表示されます。

前へ、次へのリンクでも、tagにtdを指定して実装したかったのですが、

リンクがある場合に指定したタグを表示してくれなかったので

上記のようにtagの指定は行わず、tdタグで囲みました。

以下のサイトを参考にさせて頂きました。
ページネーションを利用する CakePHP2.1初心者メモ