CakePHP2系のページネーションにTwitter BootStrapのデザインを適用する

CakePHP2系のページネーションにTwitter BootStrapのデザインを適用するCakePHP2

CakePHP2系のページネーションにTwitter BootStrapのデザインを適用する

CakePHPを使ってシステムを作るとき、Twitter Bootstrapをよく使うと思います。Paginatorもよく使います。で、CakePHPデフォルトのPaginatorを使うとTwitter BootstrapのPaginatorのデザインが反映されません。この記事では、TwitterBootstrapのPaginatorのデザインのCakePHPのPaginatorに適用するサンプルを紹介します。

■以下のように記述をします

以下、サンプルです。そのままコピペして利用できると思います。

<div class="pagination">
    <ul>
        <?php echo $this->Paginator->prev(__('<<'), array('tag' => 'li'), null, array('tag' => 'li','class' => 'disabled','disabledTag' => 'a')); ?>
        <?php echo $this->Paginator->numbers(array('separator' => '','currentTag' => 'a', 'currentClass' => 'active','tag' => 'li','first' => 1, 'ellipsis' => '<li class="disabled"><a>...</a></li>')); ?>
        <?php echo $this->Paginator->next(__('>>'), array('tag' => 'li','currentClass' => 'disabled'), null, array('tag' => 'li','class' => 'disabled','disabledTag' => 'a')); ?>
    </ul>
</div>

 

このPaginator用のソースをElementにしておいてPaginatorが必要なViewで適宜読みこめば、どこでも同じデザインが適用されたPaginatorが利用できます。参考にしてみてください。では。