Laravelのページネーションで、以下のように
・最初と最後のページに遷移するボタン
・今のページと総ページ数(全体ページ数)
を出現させる(使用できるようにする)方法です。
やりたいこと
上述の通り、以下のキャプチャのようなページネーションを作成する
ボタンはそれぞれ、
①最初のページへのリンク
②前のページへのリンク
③次のページへのリンク
④最後のページへのリンク
となっています。
環境
- PHP:バージョン7.3.7
- Laravel:バージョン5.8
- OS:Windows10
デフォルトのページネーション
まずはLaravelデフォルトのページネーションから。
①前のページへのリンク ②次のページへのリンク ②番号のページへのリンク となっています。記述も至って簡単で、ページングしたいページのビュークラスに、
{{ $tests->links() }}
と記述するだけ($testsはページング対象のデータの入った変数)。
ちなみに、これは、
\vendor\laravel\framework\src\Illuminate\Pagination\resources\views配下の
default.blade.php
がベースになっています。
最初と最後のページに遷移するボタンと、今のページと総ページ数を出現させる
1. カスタムページング用のファイルの作成
\resources\views配下に、\vendor\paginationディレクトリ(フォルダ)を作り、その配下にカスタムページング用のファイルを作成します。
今回は、「pagination_view.blade.php」というファイル名にしました。
2. カスタムページネーション用のファイルの編集
作成したカスタムページネーション用のファイルに以下のように記述します。
①最初のページへのリンク
②前のページへのリンク
③次のページへのリンク
④最後のページへのリンク
の部分については、@akkino_D-En さんの
Laravelでリンク数を可変で決められるペジネーションの自作方法
をそのまま使用させていただきました。
@if ($paginator->hasPages())
<ul class="pagination" role="navigation">
// 最初のページへのリンク
{{-- First Page View --}}
<li class="page-item {{ $paginator->onFirstPage() ? ' disabled' : '' }}">
<a class="page-link" href="{{ $paginator->url(1) }}">«</a>
</li>
// 前のページへのリンク
{{-- Previous Page Link --}}
<li class="page-item {{ $paginator->onFirstPage() ? ' disabled' : '' }}">
<a class="page-link" href="{{ $paginator->previousPageUrl() }}">‹</a>
</li>
{{-- Pagination Elements --}}
@foreach ($elements as $element)
{{-- "Three Dots" Separator --}}
@if (is_string($element))
<li class="disabled" aria-disabled="true"><span>{{ $element }}</span></li>
@endif
{{-- Array Of Links --}}
@if (is_array($element))
@foreach ($element as $page => $url)
@if ($page == $paginator->currentPage())
// 現在のページ
<li class="active" aria-current="page"><span> {{ $page }}</span></li>
// 現在のページと最後の総ページの間の「/」
/
// 総ページ数(=最後のページ)
<li class="active" aria-current="page"><span>{{ $paginator->lastPage() }} </span></li>
@endif
@endforeach
@endif
@endforeach
// 次のページへのリンク
{{-- Next Page Link --}}
<li class="page-item {{ $paginator->currentPage() == $paginator->lastPage() ? ' disabled' : '' }}">
<a class="page-link" href="{{ $paginator->nextPageUrl() }}">›</a>
</li>
// 最後のページへのリンク
{{-- Last Page Link --}}
<li class="page-item {{ $paginator->currentPage() == $paginator->lastPage() ? ' disabled' : '' }}">
<a class="page-link" href="{{ $paginator->url($paginator->lastPage()) }}">»</a>
</li>
</ul>
@endif
3. カスタムページネーション用のファイルの読み込み
Viewファイルのページネーション使用箇所に以下のように記述します。
{{ $tests->links('vendor/pagination/pagination_view') }}
検索ページなどで、ページング後も検索条件を保持させたい場合は以下のように記述するとよいでしょう。
「appends(request()->query())」の部分で、検索条件を保持してくれます。
{{ $tests->appends(request()->query())->links('vendor/pagination/pagination_view') }}
参考
今回は以下を参考にさせていただきました。ありがとうございました!
①<< < > >>の部分
Laravelでリンク数を可変で決められるペジネーションの自作方法 | Qiita
②総ページの部分
Laravel 5.5 データベース:ペジネーション | ReadDouble
③デフォルトのページネーション、$paginator->currentPage()の部分
Laravelでカスタムページネーションを作成 | Qiita