FuelPHPでページャー(Pagination)

FuelPHPでページャー

FuelPHP標準のPaginationを使用したページャーを実装してみます。

想定バージョン) FuelPHP 1.3

CodeIgniterの標準のページャーは、offsetがURLに入り、残念な感じになっていましたが、FuelPHPではそんな事はないようです。

今回は、ページャーのデザインとして、下記サイトのCSSを使用させて頂きました。

[使えるCSSテクニックVol.2] CSS を使った見栄えの良いページャー | バシャログ。

日本語設定

まずは、前後リンクの日本語設定を行います。

$ 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>

出力内容

以下のようなページャーが出力されます。
f:id:BTT:20120619171811p:plain
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の前の個数が気になる...