slimでknp-componentsのpaginatorを使う(非データベースアクセス版)
knp-componentsを利用してページ捲りを実装する方法を記す。
今回は[domain]/page/1でアクセスできるページ捲りテスト用のページを作成し、a~zまでのアルファベットを表示するページを作成します。
knp-componentsのインストール
$ vi composer.json "require": { "slim/slim": "2.*", "slim/extras": "2.0.*", "twig/twig": "1.*", "pimple/pimple": "v1.0.2", "phpunit/phpunit": "3.7.21", "fabpot/goutte": "v1.0.1", "knp-components": "1.2.2" $ php composer.phar update
routeを追加
$ vi config/routes.php ~略~ $app->get('/page/:page', function($page = 1) use ($container) { $container['app.controllers.contents_controller']->pageTest($page); });
controllerを実装
a~zの26文字の配列を1ページ5文字で表示するように設定
$ vi src/Taka512/Controllers/ContentsController.php use Knp\Component\Pager\Paginator; class ContentsController { ~略~ public function pageTest($page) { $paginator = new Paginator(); $target = range('a', 'z'); $pagination = $paginator->paginate($target, $page, 5); $this->app->render('page_test.html.twig', array('pagination' => $pagination)); }
テンプレートを実装
ページ捲りは別テンプレートで表示するため、ページ捲り用のデータをpという変数でpagination.html.twigに渡してます。
$ vi src/views/page_test.html.twig <ul> {% for item in pagination %} <li>{{ item }}</li> {% endfor %} </ul> {% include "pagination.html.twig" with { 'p' : pagination.getPaginationData } %}
pagination用のテンプレートを準備
$ vi src/views/pagination.html.twig {% if p.pageCount > 1 %} <div class="pagination"> <ul> {% if p.first is defined and p.current != p.first %} <li class="prev"> <a href="/page/{{ p.first }}"><<</a> </li> {% else %} <li class="prev disabled"><a href="/page/{{ p.first}}"><<</a></li> {% endif %} {% if previous is defined %} <li class="prev"> <a href="/page/{{ p.previous }}"><</a> </li> {% endif %} {% for page in p.pagesInRange %} <li {% if page == p.current %}class="active"{% endif %}><a href="/page/{{ page }}"> {{ page }} </a></li> {% endfor %} {% if p.next is defined %} <li class="next"> <a href="/page/{{ p.next }}">></a> </li> {% endif %} {% if p.last is defined and p.current != p.last %} <li class="next"> <a href="/page/{{ p.last }}">>></a> </li> {% else %} <li class="next disabled"> <a href="/page/{{ p.last }}">>></a> </li> {% endif %} </ul> </div> {% endif %}
これで完了