Laravel4.1、Gumby用ペジネーション・プレゼンター

タグ： Laravel4   Gumby  

CSSフレームワークのGumby用のペジネーション・プレゼンターです。こんな感じです。

ペジネーション

全体のカラーリングは手を入れていますので、オリジナルから変更されています。まあ、Gumbyはカスタマイズあってのフレームワークですからね。

クラスがオートロードできるように、適当な場所に設置、クラスの名前変更をしてください。

<?php

use Illuminate\Pagination\BootstrapPresenter;

/**
 * Gumby presenter
 *
 * HTMLタグがハードコードされているプレゼンターメソッドを上書きする。
 */
class GumbyPresenter extends BootstrapPresenter
{

    /**
     * ペジネーションの数字部分生成
     *
     * @param int $start
     * @param int $end
     * @return string
     */
    public function getPageRange( $start, $end )
    {
        $pages = array();

        for( $page = $start; $page <= $end; $page++ )
        {
            if( $this->currentPage == $page )
            {
                $pages[] = '<li class="primary badge">'.$page.'</li>';
            }
            else
            {
                $pages[] = $this->getLink( $page );
            }
        }

        return implode( '', $pages );
    }

    /**
     * 前のページリンク生成
     *
     * @param string $text
     * @return string
     */
    public function getPrevious( $text = '«' )
    {
        if( $this->currentPage <= 1 )
        {
            return '<li class="default badge">'.$text.'</li>';
        }
        else
        {
            $url = $this->paginator->getUrl( $this->currentPage - 1 );

            return '<li class="primary badge"><a href="'.$url.'">'.$text.'</a></li>';
        }
    }

    /**
     * 次のページリンク生成
     *
     * @param string $text
     * @return string
     */
    public function getNext( $text = '»' )
    {
        if( $this->currentPage >= $this->lastPage )
        {
            return '<li class="dafult badge">'.$text.'</li>';
        }
        else
        {
            $url = $this->paginator->getUrl( $this->currentPage + 1 );

            return '<li class="primary badge"><a href="'.$url.'">'.$text.'</a></li>';
        }
    }

    /**
     * 省略の三連ドット生成
     *
     * @return string
     */
    public function getDots()
    {
        return '<li class="badge">...</li>';
    }

    /**
     * リンク要素の生成
     * @param mixed $page
     * @return string
     */
    public function getLink( $page )
    {
        $url = $this->paginator->getUrl( $page );

        return '<li class="light badge"><a href="'.$url.'">'.$page.'</a></li>';
    }

}

これを利用する、ビューファイルです。

<?php $presenter = new GumbyPresenter( $paginator ); ?>

<?php if( $paginator->getLastPage() > 1 ): ?>
    <div class="nine centered"> <!-- センタリング用 -->
        <ul class="pagination">
            <?php echo $presenter->render(); ?>
        </ul>
    </div>
<?php endif; ?>

プレゼンター中のli要素のbadge（バッチ）クラスは、display: inline-block;が指定されていますので、横に並べて表示できます。途中省略の3連ピリオドはバッチで囲んでいませんが、このクラスを付けることで、横一列に並べています。

ビューファイルのdiv要素は、センタリング用です。Gumbyは基本12カラムのグリッドシステムです。幅を指定している"nine"クラスは、適宜調整が必要です。このdivクラスを省けば、左寄せです。これを付けても、横幅の狭い画面では、左寄せになります。（一番小さいiPhoneサイズの場合は、2段に別れます。多分、回避策はプレゼンターとビューをもう一つ用意し、横幅が小さい画面では、別のペジネーションに切り替えることでしょう。）