LoginSignup
15

More than 3 years have passed since last update.

Laravelでカスタムページネーションを作成

Posted at

最近、業務でLaravelを使うことが非常に嬉しいです。

Laravelは、やりたいことなら何でも簡単にできて最高です。
そんな中でも若干面倒くさいページネーションのデザインの変更の方法について今回は紹介します。

今回の最終ゴールとして以下の画像のようなページネーションを作成します。
スクリーンショット 2019-09-16 21.33.27.png

~手順~

手順は簡単で、

1.default.blade.phpがあることを確認

2.default.blade.phpの中身を変更

3.Bladeファイルから呼び出し

です。

1.default.blade.phpがあることを確認

まずは、default.blade.phpがあることを確認します。
resources/views/vendor/pagination/default.blade.php(5.8)
src/Illuminate/Pagination/resources/views/default.blade.php(5.7)

バージョンによってディレクトリが違いました。
見つからない方は、ファイル名検索でdefault.blade.phpを探してみてください。
もしくは、

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

上記コマンドで新規で作成しください。

2.default.blade.phpの中身を変更

//もしPageがあったら。
@if ($paginator->hasPages())
    <ul class="pagination" role="navigation">
        {{-- Previous Page Link --}}
//ペジネータが最初のページを扱っているか判定
        @if ($paginator->onFirstPage())
            <li class="disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
                <span aria-hidden="true">&lsaquo;</span>
            </li>
        @else
            <li>
                <a href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')">&lsaquo;</a>
            </li>
        @endif

        {{-- Pagination Elements --}}
        @foreach ($elements as $element)
            {{-- "Three Dots" Separator --}}
            @if (is_string($element))
                <li class="disabled" aria-disabled="true"><span>{{ $element }}</span></li>
            @endif

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

        {{-- Next Page Link --}}

//複数ページへアイテムを分割できる数があるか判定
        @if ($paginator->hasMorePages())
            <li>
//次ページのURL取得
                <a href="{{ $paginator->nextPageUrl() }}" rel="next" aria-label="@lang('pagination.next')">&rsaquo;</a>
            </li>
        @else
            <li class="disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
                <span aria-hidden="true">&rsaquo;</span>
            </li>
        @endif
    </ul>
@endif

なるほど、class名を書き換えれば簡単に実装できそうですね。
他に解説もいらないと思ったので以下に変更しました。


@if ($paginator->hasPages())
<div class="paginationWrap">
    <ul class="pagination" role="navigation">
        {{-- Previous Page Link --}}
        @if ($paginator->onFirstPage())
            <li  aria-disabled="true" aria-label="@lang('pagination.previous')">
                «
            </li>
        @else
            <li>
                <a href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')">«</a>
            </li>
        @endif

        {{-- Pagination Elements --}}
        @foreach ($elements as $element)
            {{-- "Three Dots" Separator --}}
            @if (is_string($element))
                <li aria-disabled="true">{{ $element }}</li>
            @endif

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

        {{-- Next Page Link --}}
        @if ($paginator->hasMorePages())
            <li>
                <a href="{{ $paginator->nextPageUrl() }}" rel="next" aria-label="@lang('pagination.next')">»</a>
            </li>
        @else
            <li aria-disabled="true" aria-label="@lang('pagination.next')">
            »
            </li>
        @endif
    </ul>
</div>
@endif

cssは以下のようなかたちです。

.paginationWrap {
    display: flex;
    justify-content: center;
    margin-top: 38px;
    margin-bottom: 40px;
}

.paginationWrap ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

.paginationWrap ul.pagination li {
  display: inline;
  margin-right: 4px;
}

.paginationWrap ul.pagination li a {
    color: #2f3859;
    padding: 8px 14px;
    text-decoration: none;
}

.paginationWrap ul.pagination li a.active {
    background-color: #4b90f6;
    color: white;
    border-radius: 40px;
    width: 38px;
    height: 38px;
}

.paginationWrap ul.pagination li a:hover:not(.active) {
    background-color: #e1e7f0;
    border-radius: 40px;
}

これでページネーションの設定が終了しました。

3.Bladeファイルから呼び出し

あと簡単で

  {{ $変数名->links('pagination::default') }}

上記でカスタムページネーションが呼び出せます。

ありがとうございました。

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
15