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

ホーム
アプリ関連ニュース
技術情報
[Laravel] Eloquentとページネーション(4)

2020年12月11日
技術情報

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

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

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

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

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

1	\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

@if ($paginator->hasPages())

<nav>

@if ($paginator->onFirstPage())

</li>

@else

<a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')">‹</a>

</li>

@endif

@foreach ($elements as $element)

@if (is_string($element))

<li class="page-item disabled" aria-disabled="true"><span class="page-link">{{ $element }}</span></li>

@endif

@if (is_array($element))

@foreach ($element as $page => $url)

@if ($page == $paginator->currentPage())

@else

@endif

@endforeach

@endif

@endforeach

@if ($paginator->hasMorePages())

<a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next" aria-label="@lang('pagination.next')">›</a>

</li>

@else

</li>

@endif

</ul>

</nav>

@endif

上記のhtml生成用処理をベースに、任意のレイアウトのclassなどの調整をおこないます。
ページネーションのカスタマイズが完了したら、ページネーションを呼び出す際のlinksメソッドの引数にカスタマイズしたBladeファイルのファイル名を設定すれば使用することができます。

{{ $users->links() }}

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

金曜日担当：nishida

nishida at 2020年12月11日 10:00:03

Tweets by GIGASJAPAN_APPS

お問い合わせはこちら

お問い合わせ・ご相談はお電話、またはお問い合わせフォームよりお受け付けいたしております。

tel. 06-6454-8833（平日 10:00～17:00）

お問い合わせフォーム

↑

↓

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

ギガスジャパン

お問い合わせ