Laravelでシンプルなページネーションを作ってみた

概要

「デフォルトのページネーションが使いづらい」
「よくある「<」（一個前に移動するやつ）とか「<<」（最初に移動するやつ）があまりしっくりこない（個人的な感覚）」

と思ったので、しんぷるいずざべすとなページネーションを、以下の記事をアレンジして作成しました。
参考にした株式会社ゆめみさんの記事

完成形

開発環境

• PHP 7.4.27
• Laravel 6.20.35

作り方

まずはマニュアルのコマンドを実行します。

コマンド

php artisan vendor:publish --tag=laravel-pagination

実行結果がこちらです。

実行結果

❯ php artisan vendor:publish --tag=laravel-pagination
Copied Directory [/vendor/laravel/framework/src/Illuminate/Pagination/resources/views] To [/resources/views/vendor/pagination]
Publishing complete.

どうやら

/vendor/laravel/framework/src/Illuminate/Pagination/resources/views

にある雛形データの入ったディレクトリが

/resources/views/vendor/pagination

にコピペされたようです。

ディレクトリ内には色々とファイルがあり、その中の
bootstrap-4.blade.php
がデフォルトのページネーションビューに当たります。

このファイルを編集してもいいですが、今回はコマンドで作成されたディレクトリ内に、新しくビューファイルを作成します。

名前はなんでもいいですが、とりあえず

custom_pagination_view.blade.php

というファイルを作成し、以下のとおりコードを記述します。

/resources/views/vendor/paginationcustom_pagination_view.blade.php

@if ($paginator->hasPages())

    {{-- 定数よりもページ数が多い時 --}}
    @if ($paginator->lastPage() > Paginate::LINK_SUM)

        {{-- 現在ページ ≦ 2 の場合 --}}
        @if ($paginator->currentPage() <= floor(Paginate::LINK_SUM / 2))
            <?php $start_page = 1; ?>
            <?php $end_page = Paginate::LINK_SUM; ?>

        {{-- 現在ページ > 最終ページ - 2 の場合 --}}
        @elseif ($paginator->currentPage() > $paginator->lastPage() - floor(Paginate::LINK_SUM / 2))
            <?php $start_page = $paginator->lastPage() - (Paginate::LINK_SUM - 1); ?>
            <?php $end_page = $paginator->lastPage(); ?>

        {{-- 上記以外 --}}
        @else
            <?php $start_page = $paginator->currentPage() - (floor((Paginate::LINK_SUM % 2 == 0 ? Paginate::LINK_SUM - 1 : Paginate::LINK_SUM)  / 2)); ?>
            <?php $end_page = $paginator->currentPage() + floor(Paginate::LINK_SUM / 2); ?>
        @endif

    {{-- 定数よりもページ数が少ない時 --}}
    @else
        <?php $start_page = 1; ?>
        <?php $end_page = $paginator->lastPage(); ?>
    @endif


    <ul class="c-page" role="navigation">

        @if ($end_page > Paginate::LINK_SUM)
            <li><a class="c-page__link" href="{{ $paginator->url(1) }}">1</a></li>
        @endif

        @if ($end_page > Paginate::LINK_SUM + 1)
            <li>. . .</li>
        @endif

        @for ($i = $start_page; $i <= $end_page; $i++)
            @if ($i == $paginator->currentPage())
                <li class="c-page__active"><span class="c-page__link">{{ $i }}</span></li>
            @else
                <li><a class="c-page__link" href="{{ $paginator->url($i) }}">{{ $i }}</a></li>
            @endif
        @endfor

        @if ($end_page < $paginator->lastPage() - 1)
            <li>. . .</li>
        @endif

        @if($end_page != $paginator->lastPage())
            <li><a class="c-page__link" href="{{ $paginator->url($paginator->lastPage()) }}">{{ $paginator->lastPage() }}</a></li>
        @endif

    </ul>
@endif

最後にページネーションを設置します。デフォルトの場合、設置したい箇所に

{{ $posts->links() }}

と記述すれば済みますが、独自に作成したものを使う場合は、linksメソッドの引数にそのファイル名を取ります。

{{ $posts->links('vendor.pagination.custom_pagination_view') }}

これで、以下のようなシンプルなページネーションの完成です。