ハマログ

株式会社イーツー・インフォの社員ブログ

Laravel5のページナビをカスタマイズする

LaravelのPagination機能を使うと、超簡単にページナビゲーションを実現することができます。
標準ではBootstrap用のスタイルが組み込まれています。
https://laravel.com/docs/5.2/pagination

Controller

// ページネーションを使うことと件数を指定してデータ取得
$jobs = Job::where('type', 'internship')->paginate(30);

// Viewに渡す
view('/path/to/list')->with('jobs', $jobs);

View

{!! $jobs->render() !!}

みため
20160416 165135

出力コードがvendor側のライブラリに組み込まれているため、そのままだとCSSでスタイルを調整するくらいしかできません。

では、オリジナルのページネーションを出力してみます。

app/Http/Pagination/FrontPaginationPresenter.php

<?php

namespace App\Http\Pagination;

use Illuminate\Support\HtmlString;
use Illuminate\Contracts\Pagination\Paginator as PaginatorContract;
use Illuminate\Contracts\Pagination\Presenter as PresenterContract;
use App\Http\Pagination\UrlWindowPresenterTrait;
use Illuminate\Pagination\BootstrapThreeNextPreviousButtonRendererTrait;
use Illuminate\Pagination\UrlWindow;

class FrontPaginationPresenter implements PresenterContract
{

    use BootstrapThreeNextPreviousButtonRendererTrait,
        UrlWindowPresenterTrait;

    protected $paginator;
    protected $window;

    public function __construct(PaginatorContract $paginator, UrlWindow $window = null)
    {
        $this->paginator = $paginator;
        $this->window = is_null($window) ? UrlWindow::make($paginator) : $window->get();
    }

    public function hasPages()
    {
        return $this->paginator->hasPages();
    }

    // レンダリング
    public function render()
    {
        if ($this->hasPages()) {
            return new HtmlString(sprintf(
                            '<ul class="pagination">%s %s %s %s %s</ul>', $this->getFirstButton(), $this->getPreviousButton(), $this->getLinks(), $this->getNextButton(), $this->getLastButton()
            ));
        }

        return '';
    }

    // 通常のタグ
    protected function getAvailablePageWrapper($url, $page, $rel = null)
    {
        $rel = is_null($rel) ? '' : ' rel="' . $rel . '"';

        return '<li><a href="' . htmlentities($url) . '"' . $rel . '>' . $page . '</a></li>';
    }

    // リンク無効な文字列のタグ
    protected function getDisabledTextWrapper($text)
    {
        return '<li class="disabled"><span>' . $text . '</span></li>';
    }

    // 現在のページ
    protected function getActivePageWrapper($text)
    {
        return '<li class="active"><span>' . $text . '</span></li>';
    }

    protected function getDots()
    {
        return $this->getDisabledTextWrapper('...');
    }
}

コードはIlluminate\Pagination\BootstrapThreePresenter.phpからコピペしました。

続いて、もともとあるソースコードのお作法に従い、独自のUrlWindowPresenterTraitを作成します。
オリジナルのtraitをそのまま継承して拡張しました。

app/Http/Pagination/UrlWindowPresenterTrait.php

<?php
namespace App\Http\Pagination;

trait UrlWindowPresenterTrait
{
    use \Illuminate\Pagination\UrlWindowPresenterTrait;

    protected function getFirstButton($text = 'First')
    {
        if ($this->paginator->currentPage() <= 1) {
            return $this->getDisabledTextWrapper($text);
        }

        return $this->getPageLinkWrapper(
                        $this->paginator->url(1), $text, 'first'
        );
    }

    protected function getLastButton($text = 'Last')
    {
        if (!$this->paginator->hasMorePages()) {
            return $this->getDisabledTextWrapper($text);
        }

        return $this->getPageLinkWrapper(
                        $this->paginator->url($this->lastPage()), $text, 'last'
        );
    }
}

ここまでで完成。

呼び出しがnamespace指定だとめんどくさいので、エイリアスを記述します。
app/config/app.php

    /*
      |--------------------------------------------------------------------------
      | Class Aliases
      |--------------------------------------------------------------------------
     */
    'aliases' => [

        'App' => Illuminate\Support\Facades\App::class,
        'Artisan' => Illuminate\Support\Facades\Artisan::class,
        'Auth' => Illuminate\Support\Facades\Auth::class,
        // (略)
        'FrontPaginationPresenter' => App\Http\Pagination\FrontPaginationPresenter::class,
    ],

準備完成。Viewで呼び出します。

{!! (new FrontPaginationPresenter($jobs))->render(); !!}

※ここもうちょっと短く書けそう

みため
20160416 171112

Wonderful!

これで無事に目的を達成することができました。

LaravelPaginatePaginationページナビページネーション

  kaneko tomo   2016年4月16日


関連記事

EコマースのオープンソースMagentoをXAMPPにインストール

こんにちは。S.Iです。 この度新規案件でMagentoのXAMPP for W…

Eclipseプロジェクト・ファセットの動的Webモジュールのバージョンをダウングレードする

ローカル環境構築に伴い、プロジェクト・ファセットの動的Webモジュールのバージョ…

eclipseではまってしまったこと

きっかけ そもそもの始まりはjavaをアップデートしようと思ったのがきっかけでご…


← 前の投稿

次の投稿 →