[Laravel] Eloquentとページネーション(4)
- 2020年12月11日
- 技術情報
自力でページネーションの実装をおこなうには、大変工数がかかりますが、Laravelフレームワークが用意しているページネーションを使用することで工数が大幅に軽減されます。
今回はLaravelフレームワークのページネーションのカスタマイズ方法を紹介したいと思います。
本記事は前回の「[Laravel] Eloquentとページネーション(3)」の続きになります。

上記のページネーションhtmlはLaravelデフォルトの状態で、cssフレームワークbootstrapのページネーションレイアウトスタイルで生成されます。
生成元になっているベースのBladeファイルはLaravelフレームワーク内の以下のファイルで確認できます。
1 |
\vendor\laravel\framework\src\Illuminate\Pagination\resources\views\bootstrap-4.blade.php |
ページネーションのデザインをカスタマイズしたい場合、上記のBladeファイルの中身をコピーして、任意の名称のBladeファイルを別途作成して、変更を加えていく方法で対応できます。
bootstrap-4.blade.phpに記述されているページネーションのhtml生成ベースコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
@if ($paginator->hasPages()) <nav> <ul class="pagination"> {{-- Previous Page Link --}} @if ($paginator->onFirstPage()) <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')"> <span class="page-link" aria-hidden="true">‹</span> </li> @else <li class="page-item"> <a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')">‹</a> </li> @endif {{-- Pagination Elements --}} @foreach ($elements as $element) {{-- "Three Dots" Separator --}} @if (is_string($element)) <li class="page-item disabled" aria-disabled="true"><span class="page-link">{{ $element }}</span></li> @endif {{-- Array Of Links --}} @if (is_array($element)) @foreach ($element as $page => $url) @if ($page == $paginator->currentPage()) <li class="page-item active" aria-current="page"><span class="page-link">{{ $page }}</span></li> @else <li class="page-item"><a class="page-link" href="{{ $url }}">{{ $page }}</a></li> @endif @endforeach @endif @endforeach {{-- Next Page Link --}} @if ($paginator->hasMorePages()) <li class="page-item"> <a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next" aria-label="@lang('pagination.next')">›</a> </li> @else <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')"> <span class="page-link" aria-hidden="true">›</span> </li> @endif </ul> </nav> @endif |
上記のhtml生成用処理をベースに、任意のレイアウトのclassなどの調整をおこないます。
ページネーションのカスタマイズが完了したら、ページネーションを呼び出す際のlinksメソッドの引数にカスタマイズしたBladeファイルのファイル名を設定すれば使用することができます。
1 2 3 |
{{ $users->links() }} {{ $users->links('my_custom_pagination') }} |
金曜日担当:nishida
nishida at 2020年12月11日 10:00:03