零弐壱蜂

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

2 min read
hiroweb developer

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

準備

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

Boostrapのスタイルに合わせる

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

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

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

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

デフォルトではdefaultが有効になっている。 pagination.phpの以下の部分を 
'active' => 'default'
bootstrap3もしくはbootstrapに書き換えればOK(使っているbootstrapに合わせる) 
'active' => 'bootstrap3'

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

<?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'            => "««",
        'first-link'              => "<a href=\"{uri}\">{page}</a>",

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

        'previous'                => "<li>{link}</li>",
        'previous-marker'         => "«",
        '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'             => "»",
        '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'             => "»»",
        'last-link'               => "<a href=\"{uri}\">{page}</a>",

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

);