Laravel

【Laravel】独自のページネーションを作成する

えび

忘れがちなページネーションのカスタマイズ方法手順をメモ

vendor/paginationディレクトリを自動生成する

  • 下記コマンドでresources/views以下にvendor/paginationディレクトリを自動生成する
php artisan vendor:publish --tag=laravel-pagination
  • 作成されたresources/views/vendor/paginationディレクトリ

独自ページネーション用のviewファイルを作成する

  • resources/views/vendor/paginationの中に独自ページネーションbladeを作成する
    (ここではcustom.blade.phpとする)
    続いて作成したファイルにてカスタマイズしたページネーションを実装する
@if ($paginator->hasPages())
    <nav class="p-pagination">
        <ul>
        <!-- 前へ移動ボタン -->
        @if ($paginator->onFirstPage())
            <li class="disabled">
                <img src="{{ asset('img/arrow-previous.svg') }}" class="p-pagination__previous" alt="前へ">
            </li>
        @else
            <li>
                <a href="{{ $paginator->previousPageUrl() }}">
                    <img src="{{ asset('img/arrow-previous.svg') }}" class="p-pagination__previous" alt="前へ">
                </a>
            </li>
        @endif

        <!-- ページ番号　-->
        @foreach ($elements as $element)
            @if (is_string($element))
                <li class="disabled">
                    {{ $element }}
                </li>
            @endif

            @if (is_array($element))
                @foreach ($element as $page => $url)
                    @if ($page == $paginator->currentPage())
                        <li class="active">
                            {{ $page }}
                        </li>
                    @else
                        <li class="active">
                            <a href="{{ $url }}">{{ $page }}</a>
                        </li>
                    @endif
                @endforeach
            @endif
        @endforeach

        <!-- 次へ移動ボタン -->
        @if ($paginator->hasMorePages())
            <li>
                <a href="{{ $paginator->nextPageUrl() }}">
                    <img src="{{ asset('img/arrow-next.svg') }}" class="p-pagination__next" alt="次へ">
                </a>
            </li>
        @else
            <li class="disabled">
                <img src="{{ asset('img/arrow-next.svg') }}" class="p-pagination__next" alt="次へ">
            </li>
        @endif
        </ul>
    </nav>
@endif

独自のページネーションをviewから呼び出す

  • viewで呼び出して使用する
{{ $items->links('vendor.pagination.custom') }}

(番外編) 「×件中 ×〜× 件」を表示する

よくみるやつ

{{ $items->total() }}件中
{{ $items->firstItem() }}〜{{ $items->lastItem() }} 件を表示

\ 案件のご依頼・ご相談はこちらから /