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() !!}
みため
出力コードが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(); !!}
※ここもうちょっと短く書けそう
みため
Wonderful!
これで無事に目的を達成することができました。