【Laravel】日本語＆数字表記のページャーを設置する

表示イメージ

※左側に〇件目～〇件目（全〇件）、右側に数字表記のページャー

まずはページャーのテンプレートを用意する

resources > views > vendor > pagination内に以下のファイルがあるか確認する（元々無い場合は、vendorフォルダごと無い）

無い場合は、ターミナル（コマンドプロンプト）を起動し、laravelプロジェクトのあるフォルダに移動し、以下を入力。

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

ファイルが作成されているのを確認する。

テンプレートを日本語に修正

bootstrap-5.blade.phpを修正します。

修正前

<p class="small text-muted">
    {!! __('Showing') !!}
    <span class="fw-semibold">{{ $paginator->firstItem() }}</span>
    {!! __('to') !!}
    <span class="fw-semibold">{{ $paginator->lastItem() }}</span>
    {!! __('of') !!}
    <span class="fw-semibold">{{ $paginator->total() }}</span>
    {!! __('results') !!}
</p>

上記コード部分を探します。

修正後

<p class="small text-muted">
    <span class="fw-semibold">{{ $paginator->firstItem() }}</span>件目～
    <span class="fw-semibold">{{ $paginator->lastItem() }}</span>件目
    （全<span class="fw-semibold">{{ $paginator->total() }}</span>件）
</p>

このように修正します。

コントローラとビューテンプレート

コントローラ

public function メソッド名(Request $request){
    $items = モデルのクラス名::paginate(1ページあたりの表示件数件数);
    return view('ビューテンプレート名',['items' => $items]);
}

※paginate(10)等、数字を記述します。

ビューテンプレート

{{$items->links('vendor.pagination.bootstrap-5')}}

※ページャーを入れたい場所に記述

※linksの引数に使用したいテンプレート名を記述

CSSで体裁を整える

自分でやってもいいですが、Bootstrapに対応しているので、Bootstrapを使用したい場合はheadタグ内に以下のリンクを貼る。

<link rel="stylesheet" type="text/css" media="all" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

979