[Laravel] Eloquentとページネーション(4)

自力でページネーションの実装をおこなうには、大変工数がかかりますが、Laravelフレームワークが用意しているページネーションを使用することで工数が大幅に軽減されます。

今回はLaravelフレームワークのページネーションのカスタマイズ方法を紹介したいと思います。
本記事は前回の「[Laravel] Eloquentとページネーション(3)」の続きになります。

上記のページネーションhtmlはLaravelデフォルトの状態で、cssフレームワークbootstrapのページネーションレイアウトスタイルで生成されます。

生成元になっているベースのBladeファイルはLaravelフレームワーク内の以下のファイルで確認できます。

\vendor\laravel\framework\src\Illuminate\Pagination\resources\views\bootstrap-4.blade.php

ページネーションのデザインをカスタマイズしたい場合、上記のBladeファイルの中身をコピーして、任意の名称のBladeファイルを別途作成して、変更を加えていく方法で対応できます。

bootstrap-4.blade.phpに記述されているページネーションのhtml生成ベースコード

@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ファイルのファイル名を設定すれば使用することができます。

{{ $users->links() }}

{{ $users->links('my_custom_pagination') }}

金曜日担当：nishida