Laravel 5.3でページネーションのデザインを変更する方法の紹介です。
PHPで人気のWebフレームワーク"Laravel"も5.3がリリースされて、 幾つかの変更や機能が追加されました。その中の1つでページネーションのデザイン変更も容易に出来るようになりました。
LaravelではView側でページネーション用のリンクが作成できる関数が用意されていますが、デフォルトで用意されているページネーションはTwitter bootstrap用です。
プロジェクトのテンプレートにBootstrapが使われていれば問題ありませんが、カスタムCSSや その他CSSフレームワークを使われているとレイアウトが崩れる心配があります。
っということで、Laravel 5.3でページネーションのデザインの変更をしましょう！
Laravel 5.3以前でページネーションのデザインを変更すには、ページネーション用のViewを作る必要がありましたが、5.3からはコマンド1つででページネーションの雛形を生成してくれるようになりました。
まずは、コマンドライン上から下記のコマンドを打ってページネーション用のテンプレートを発行します。
# pagination用のテンプレート'resources'フォルダ内に発行
$ php artisan vendor:publish
# コマンド実行時に表示されるメッセージ
#Copied Directory [/vendor/laravel/framework/src/Illuminate/Notifications/resources/views] To [/resources/views/vendor/notifications]
#Copied Directory [/vendor/laravel/framework/src/Illuminate/Pagination/resources/views] To [/resources/views/vendor/pagination]
#Publishing complete for tag []!
上記のコマンドを打つと ' resouces/views' フォルダ内に'vendor'ディレクトリが自動作成され、その中の'pagination'フォルダ内のファイルがページネーション用のViewファイルになります。
( Laravel 5.3ではBootstrap3とBootstrap4用のページネーションテンプレートが用意されています )
# resources/views
- vendor
- notifications
- pagination
bootstrap-4.blade.php
default.blade.php
simple-bootstrap-4.blade.php
simple-default-blade.php
paginationフォルダ内にファイルが作成させましたが、下記のようにeloquentやqueryビルダーでpaginationの機能を使った場合、'default.blade.php'のテンプレートが呼び出されます。
// Controllerのサンプル
public function get_index()
{
return view('example')
->with('article', ArticleModel::paginate());
}
// Viewのサンプル
// links()でページネーションが作成されます
{{ $article->links() }}
{{-- pagination/default.blade.php --}}
<ul class="pagination">
<!-- Previous Page Link -->
@if ($paginator->onFirstPage())
<li class="disabled"><span>«</span></li>
@else
<li><a href="{{ $paginator->previousPageUrl() }}" rel="prev">«</a></li>
@endif
<!-- Pagination Elements -->
@foreach ($elements as $element)
<!-- "Three Dots" Separator -->
@if (is_string($element))
<li class="disabled"><span>{{ $element }}</span></li>
@endif
<!-- Array Of Links -->
@if (is_array($element))
@foreach ($element as $page => $url)
@if ($page == $paginator->currentPage())
<li class="active"><span>{{ $page }}</span></li>
@else
<li><a href="{{ $url }}">{{ $page }}</a></li>
@endif
@endforeach
@endif
@endforeach
<!-- Next Page Link -->
@if ($paginator->hasMorePages())
<li><a href="{{ $paginator->nextPageUrl() }}" rel="next">»</a></li>
@else
<li class="disabled"><span>»</span></li>
@endif
</ul>
もしbootstrap4用のページネーションを使いたい場合はView内で使うlinks()関数内の引数にテンプレートのパスを入れれば適応されます。
{{-- bootstrap4用のページネーションを使う場合 --}}
{{ $article->links('vendor.pagination.bootstrap-4') }}
Laravel5.3にはデフォルトでBootstrap用のページネーションは用意されていますが、その他CSSフレームワーク様のページネーションもデフォルトのテンプレートを流用すれば簡単に作成できます。
っということで、人気CSSフレームワーク、”Materialize"用と"Foundation"用のページネーションを作成してみました！
Materialize用
{{-- resources/views/vendor/pagination/materialize.blade.php --}}
<ul class="pagination">
<!-- Previous Page Link -->
@if ($paginator->onFirstPage())
<li class="disabled">
<a href="#!"><i class="material-icons">chevron_left</i></a>
</li>
@else
<li >
<a href="{{ $paginator->previousPageUrl() }}" rel="prev"><i class="material-icons">chevron_left</i></a>
</li>
@endif
<!-- Pagination Elements -->
@foreach ($elements as $element)
<!-- "Three Dots" Separator -->
@if (is_string($element))
<li class="disabled"><a>{{ $element }}</a></li>
@endif
<!-- Array Of Links -->
@if (is_array($element))
@foreach ($element as $page => $url)
@if ($page == $paginator->currentPage())
<li class="active"><a>{{ $page }}</a></li>
@else
<li class="waves-effect"><a href="{{ $url }}">{{ $page }}</a></li>
@endif
@endforeach
@endif
@endforeach
<!-- Next Page Link -->
@if ($paginator->hasMorePages())
<li class="waves-effect"><a href="{{ $paginator->nextPageUrl() }}"><i class="material-icons">chevron_right</i></a></li>
@else
<li class="disabled"><a><i class="material-icons">chevron_right</i></a></li>
@endif
</ul>
{{-- テンプレート上で使う場合 --}}
{{ $article->links('vendor.pagination.materialize') }}
Foundation用
{{-- resources/views/vendor/pagination/foundation.blade.php --}}
<ul class="pagination" role="navigation" aria-label="Pagination">
<!-- Previous Page Link -->
@if ($paginator->onFirstPage())
<li class="pagination-previous disabled"><span>Prev</span></li>
@else
<li class="pagination-previous"><a href="{{ $paginator->previousPageUrl() }}" rel="prev">Prev</a></li>
@endif
<!-- Pagination Elements -->
@foreach ($elements as $element)
<!-- "Three Dots" Separator -->
@if (is_string($element))
<li class="disabled"><span>{{ $element }}</span></li>
@endif
<!-- Array Of Links -->
@if (is_array($element))
@foreach ($element as $page => $url)
@if ($page == $paginator->currentPage())
<li class="current"><span>{{ $page }}</span></li>
@else
<li><a href="{{ $url }}">{{ $page }}</a></li>
@endif
@endforeach
@endif
@endforeach
<!-- Next Page Link -->
@if ($paginator->hasMorePages())
<li class="pagination-next"><a href="{{ $paginator->nextPageUrl() }}" rel="next">Next</a></li>
@else
<li class="pagination-next disabled"><span>Next</span></li>
@endif
</ul>
{{-- テンプレート上で使う場合 --}}
{{ $article->links('vendor.pagination.foundation') }}
Laravel 5.3でカスタムページネーションを作成する説明は以上です。
5.3からは簡単にページネーションのデザインが変更出来るので、デザインの一部にfont-awesomeのアイコンを使ったり、カスタムCSSデザインを割り当てることも簡単に出来ます。
Laravelプロジェクトでページネーションはよく使う機能の1つなので、Bootstrap以外のCSSフレームワークを使う時は覚えておきたい機能ですね！
Laravel Document: Customizing The Pagination View
