FuelPHPでページャー(Pagination)
FuelPHPでページャー
FuelPHP標準のPaginationを使用したページャーを実装してみます。
想定バージョン) FuelPHP 1.3
CodeIgniterの標準のページャーは、offsetがURLに入り、残念な感じになっていましたが、FuelPHPではそんな事はないようです。
日本語設定
まずは、前後リンクの日本語設定を行います。
$ vi fuel/app/lang/ja/pagination.php
pagination.phpに下記を記述します。
<?php return array( 'previous' => '前へ', 'next' => '次へ', );
Controller
Controllerでは、ページャー関連の設定をPaginationクラスに渡し、ページャーを生成します。(設定にページ下部参照)
データ取得時のlimit、offsetは下記で取得が可能です。
- Pagination::$per_page
- Pagination::$offset
<?php class Controller_Welcome extends Controller { public function action_index() { $view = View::forge('welcome/index'); $config = array( 'pagination_url' => 'pager/index', 'total_items' => DB::count_records('users'), 'per_page' => 5, 'uri_segment' => 3, 'num_links' => 5, 'template' => array( 'wrapper_start' => '<ul class="pager"> ', 'wrapper_end' => '</ul>', 'page_start' => '', 'page_end' => '', 'previous_start' => '<li class="prev">', 'previous_end' => '</li>', 'previous_inactive_start' => '<li class="prev">', 'previous_inactive_end' => '</li>', 'previous_mark' => '<< ', 'next_start' => '<li class="next">', 'next_end' => '</li>', 'next_inactive_start' => '<li class=next">', 'next_inactive_end' => '</li>', 'next_mark' => ' >>', 'active_start' => '<li><em>', 'active_end' => '</em></li>', 'regular_start' => '<li>', 'regular_end' => '</li>' ) ); Pagination::set_config($config); $view->set_safe('pager', Pagination::create_links()); $data = DB::select()->from('users') ->limit(Pagination::$per_page) ->offset(Pagination::$offset) ->execute() ->as_array(); return $view; } }
Template
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; font-style: normal; list-style: none; } body { font: 70% Arial, Helvetica, sans-serif; } ul.pager { margin: 10px; } ul.pager li { float: left; margin-right: 5px; border: 1px #3366FF solid; font-weight: bold; } ul.pager li.prev, ul.pager li.next { border: none; } ul.pager li a { position: relative; display: block; padding: 3px 8px; color: #3366FF; } ul.pager li a:link, ul.pager li a:visited { text-decoration: none; } ul.pager li a:hover, ul.pager li a:active { background-color: #AADDFF; text-decoration: none; } ul.pager li em { display: block; padding: 3px 8px; background: #3366FF; color: #FFFFFF; } </style> </head> <body> <?php echo $pager ?> </body> </html>
出力内容
以下のようなページャーが出力されます。
HTMLは以下のようになります。
<ul class="pager"> <li class="prev"><< 前へ </li> <li><em>1</em></li> <li><a href="http://hoge.com/welcome/index/2">2</a></li> <li><a href="http://hoge.com/welcome/index/3">3</a></li> <li><a href="http://hoge.com/welcome/index/4">4</a></li> <li><a href="http://hoge.com/welcome/index/5">5</a></li> <li><a href="http://hoge.com/welcome/index/6">6</a></li> <li class="next"><a href="http://hoge.com/welcome/index/2">次へ >></a></li> </ul>
Pagination設定内容
Paginationクラスに渡す設定一覧になります。(templateのみ配列形式)
※num_linksは、カレントページ番号の前が『num_linksで設定した値 - 1』個表示されるようです。(num_linksが5の場合、カレントページの前は4つリンクが表示される)
config
pagination_url | 生成するURL |
total_items | 対象件数 |
per_page | 1ページ当たり表示件数 |
num_links | カレントページの前後それぞれに表示するリンク数 |
uri_segment | ページ番号パラメータを挿入する位置 |
current_page | ページ番号指定? |
template | HTMLタグ設定(以下参照) |
config.template
wrapper_start/wrapper_end | ページャー全体を囲むタグ |
page_start/page_end | ページ番号全体を囲むタグ |
previous_start/previous_end | previousリンクを囲むタグ |
previous_inactive_start/previous_inactive_end | previousリンク無効時のタグ |
previous_mark | previous文言の前に出力 |
next_start/next_end | nextリンクを囲むタグ |
next_inactive_start/next_inactive_end | nextリンク無効時のタグ |
next_mark | next文言の後に出力 |
active_start/active_end | 選択ページのページ番号を囲むタグ |
regular_start/regular_end | 選択ページ以外のページ番号を囲むタグ |
num_linksの前の個数が気になる...