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


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

と思ったので、しんぷるいずざべすとなページネーションを、以下の記事をアレンジして作成しました。
[参考にした株式会社ゆめみさんの記事](https://qiita.com/akkino_D-En/items/f591eefda1c2f0f760df)

# 完成形
![スクリーンショット 2022-08-13 14.24.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1092366/a4009a7c-50a3-eff1-5d83-8ddfadb98ba6.png)

# 開発環境
- PHP 7.4.27
- Laravel 6.20.35

# 作り方

まずは[マニュアル](https://readouble.com/laravel/6.x/ja/pagination.html)のコマンドを実行します。

```:コマンド
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

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



```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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1092366/a4009a7c-50a3-eff1-5d83-8ddfadb98ba6.png)