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