LoginSignup
2
0

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-08-15

概要

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

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

完成形

スクリーンショット 2022-08-13 14.24.23.png

開発環境

  • 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') }}

これで、以下のようなシンプルなページネーションの完成です。
スクリーンショット 2022-08-13 14.24.23.png

2
0
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
2
0