[FuelPHP] ページネーションをBootstrapに合わせる方法

FuelPHPのページネーションは、デフォルトだとBootstrapに適応されていない。
ただBootstrapの準備はされているので、特別スタイルを用意してやる必要はない。

#準備

fuel/core/config/pagination.phpfuel/app/config/以下にコピー。
今後はfuel/app/config/pagination.phpを編集する。

#Boostrapのスタイルに合わせる

FuelPHPのページネーションのスタイルは、旧バージョンから使われているdefaultの他にbootstrap 3.xbootstrap 2.xが用意されている。

#ページネーションのテンプレート名

予め用意されているテンプレートの名称は以下の通り

  • default
  • bootstrap
  • bootstrap3

#テンプレートを有効化する

デフォルトではdefaultが有効になっている。
pagination.phpの以下の部分を

'active' => 'default'

bootstrap3もしくはbootstrapに書き換えればOK(使っているbootstrapに合わせる)

'active' => 'bootstrap3'

私の場合は、defaultを使うことはないので以下のような感じでbootstrap3defaultとしている。

<?php

return array(

    // the active pagination template
    'active'                      => 'default',

    // Twitter bootstrap 3.x template
    'default'                   => array(
        'wrapper'                 => "<ul class=\"pagination\">\n\t{pagination}\n\t</ul>\n",

        'first'                   => "<li>{link}</li>",
        'first-marker'            => "&laquo;&laquo;",
        'first-link'              => "<a href=\"{uri}\">{page}</a>",

        'first-inactive'          => "",
        'first-inactive-link'     => "",

        'previous'                => "<li>{link}</li>",
        'previous-marker'         => "&laquo;",
        'previous-link'           => "<a href=\"{uri}\" rel=\"prev\">{page}</a>",

        'previous-inactive'       => "<li class=\"disabled\">{link}</li>",
        'previous-inactive-link'  => "<a href=\"#\" rel=\"prev\">{page}</a>",

        'regular'                 => "<li>{link}</li>",
        'regular-link'            => "<a href=\"{uri}\">{page}</a>",

        'active'                  => "<li class=\"active\">{link}</li>",
        'active-link'             => "<a href=\"#\">{page} <span class=\"sr-only\"></span></a>",

        'next'                    => "<li>{link}</li>",
        'next-marker'             => "&raquo;",
        'next-link'               => "<a href=\"{uri}\" rel=\"next\">{page}</a>",

        'next-inactive'           => "<li class=\"disabled\">{link}</li>",
        'next-inactive-link'      => "<a href=\"#\" rel=\"next\">{page}</a>",

        'last'                    => "<li>{link}</li>",
        'last-marker'             => "&raquo;&raquo;",
        'last-link'               => "<a href=\"{uri}\">{page}</a>",

        'last-inactive'           => "",
        'last-inactive-link'      => "",
    ),

);