Vueは友達
ホーム
>
Laravel
>
初心者向け。Laravel8系・10系でページネーションをカスタムする方法

初心者向け。Laravel8系・10系でページネーションをカスタムする方法

初心者向け。Laravel8系・10系でページネーションをカスタムする方法

2272 回閲覧されました

みなさんこんにちは、jonioです。

Laravelのページネーションですがデフォルトでは下記になっています。

「誰が使うんだろう？」って言う位酷いデザインですがこれを下記に変更する方法を説明します。

簡単に実装できるのでLaravel初心者の方でも問題なく実装できると思います。

宣伝

無料で使えるLaravelの学習サイトを作りました。

ユーザー登録をしてぜひ利用して下さい。

サイトはここから。

 

この記事で知ることができること

ページネーションのカスタムです。

Laravelのバージョン

8系・10系で説明します。

10系は一部やり方が変わるのでその説明もします。

 

default.blade.phpを探す

default.blade.phpを編集します。

10系はデフォルトでは存在しないので先に説明します。

ターミナルで下記のコマンドを叩きます。

xxxxxx@MacBook-Pro legener % php artisan vendor:publish --tag=laravel-pagination

下記の表示になればコマンドは成功しています。

   INFO  Publishing [laravel-pagination] assets.  

  Copying directory [vendor/laravel/framework/src/Illuminate/Pagination/resources/views] to [resources/views/vendor/pagination] ............... DONE

3行目にも記載されていますが「Laravelのプロジェクト > resources > views > vendor > pagination」の直下に下記のファイルがあります。

  • bootstrap-4.blade.php
  • bootstrap-5.blade.php
  • default.blade.php
  • semantic-ui.blade.php
  • simple-bootstrap-4.blade.php
  • simple-bootstrap-5.blade.php
  • simple-default.blade.php
  • simple-tailwind.blade.php

この中にdefault.blade.phpがあるのを確認できます。

8系の場合は最初から入っていると思うのですが下記で検索すれば見つかります。

@if ($paginator->hasPages())

default.blade.phpを編集

default.blade.phpの中身は下記になっています。

@if ($paginator->hasPages())
    <nav>
        <ul class="pagination">
            {{-- Previous Page Link --}}
            @if ($paginator->onFirstPage())
                <li class="disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
                    <span aria-hidden="true">‹</span>
                </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 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>
                    <a href="{{ $paginator->nextPageUrl() }}" rel="next" aria-label="@lang('pagination.next')">›</a>
                </li>
            @else
                <li class="disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
                    <span aria-hidden="true">›</span>
                </li>
            @endif
        </ul>
    </nav>
@endif

class（css）で見た目を作っているのでcssを編集する為にクラス名だけを変えた下記に丸ごと変えます。

@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

scss

scssを↓にします。

.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;
}

Laravel-mixを使ってscssを導入していますが導入方法が分からない方は↓を読んで下さい。

Laravel-Mixでscssを使えるようにする方法
Laravel-Mixでscssを使えるようにする方法
みなさんこんにちは、jonioです。 Laravelでコーデ […]

 scssじゃなくてcssでやりたい方もいると思います。

その場合はChatGPTにscssのコードをcssに変換してもらって下さい。

ページネーションの導入

ページネーションを表示する時のコントローラーを一応掲載します。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ShopController extends Controller
{
    public function index()
    {
        $stocks = Stock::Paginate(6);                    //←この行
        return view('shop',compact('stocks'));
    }
}

「::Paginate(6)」の6が1ページに表示する数です。

ページネーションを使うテンプレートのコードを下記にします。


{{ $stocks->links('pagination::default') }}

「’pagination::default’」があることでカスタムしたページネーションを使う事ができます。

これで完成です。

cssを変える事で簡単にページネーションの見た目を変える事ができるので他のデザインにしたかったらcssを変えて下さい。