11
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Laravel】カスタムページネーションで、最初と最後のページに遷移するボタンと、今のページと総ページ数を出現させる

Last updated at Posted at 2019-12-24

Laravelのページネーションで、以下のように

・最初と最後のページに遷移するボタン
・今のページと総ページ数(全体ページ数)

を出現させる(使用できるようにする)方法です。

やりたいこと

上述の通り、以下のキャプチャのようなページネーションを作成する

image.png

ボタンはそれぞれ、

①最初のページへのリンク
②前のページへのリンク
③次のページへのリンク
④最後のページへのリンク

となっています。

環境

  • PHP:バージョン7.3.7
  • Laravel:バージョン5.8
  • OS:Windows10

デフォルトのページネーション

まずはLaravelデフォルトのページネーションから。

image.png

①前のページへのリンク ②次のページへのリンク ②番号のページへのリンク となっています。

記述も至って簡単で、ページングしたいページのビュークラスに、

{{ $tests->links() }}

と記述するだけ($testsはページング対象のデータの入った変数)。

ちなみに、これは、
\vendor\laravel\framework\src\Illuminate\Pagination\resources\views配下の
default.blade.php
がベースになっています。

image.png

最初と最後のページに遷移するボタンと、今のページと総ページ数を出現させる

1. カスタムページング用のファイルの作成

\resources\views配下に、\vendor\paginationディレクトリ(フォルダ)を作り、その配下にカスタムページング用のファイルを作成します。
今回は、「pagination_view.blade.php」というファイル名にしました。

image.png

2. カスタムページネーション用のファイルの編集

作成したカスタムページネーション用のファイルに以下のように記述します。

①最初のページへのリンク
②前のページへのリンク
③次のページへのリンク
④最後のページへのリンク

の部分については、@akkino_D-En さんの
Laravelでリンク数を可変で決められるペジネーションの自作方法
をそのまま使用させていただきました。

\resources\views\vendor\pagination\pagination_view.blade.php

@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) }}">&laquo;</a>
            </li>
        
        // 前のページへのリンク
        {{-- Previous Page Link --}} 
        <li class="page-item {{ $paginator->onFirstPage() ? ' disabled' : '' }}">
            <a class="page-link" href="{{ $paginator->previousPageUrl() }}">&lsaquo;</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>&nbsp;{{ $page }}</span></li>
                        // 現在のページと最後の総ページの間の「/」
                        &nbsp;/&nbsp;
                        // 総ページ数(=最後のページ)
                        <li class="active" aria-current="page"><span>{{ $paginator->lastPage() }}&nbsp;</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() }}">&rsaquo;</a>
        </li>

        // 最後のページへのリンク
        {{-- Last Page Link --}}
        <li class="page-item {{ $paginator->currentPage() == $paginator->lastPage() ? ' disabled' : '' }}">
        <a class="page-link" href="{{ $paginator->url($paginator->lastPage()) }}">&raquo;</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

11
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?