読者です 読者をやめる 読者になる 読者になる

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 }}">&lt;&lt;</a>
      </li>
    {% else %}
      <li class="prev disabled"><a href="/page/{{ p.first}}">&lt;&lt;</a></li>
    {% endif %}
    {% if previous is defined %}
      <li class="prev">
        <a href="/page/{{ p.previous }}">&lt;</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 }}">&gt;</a>
      </li>
    {% endif %}

    {% if p.last is defined and p.current != p.last %}
      <li class="next">
        <a href="/page/{{ p.last }}">&gt;&gt;</a>
      </li>
    {% else %}
      <li class="next disabled">
        <a href="/page/{{ p.last }}">&gt;&gt;</a>
      </li>
    {% endif %}
  </ul>
</div>
{% endif %}

これで完了