【Laravel8】ページネーション機能をサクッと作ってみる

はい、今回はLaravel8系でページネーション機能をviewで表示するものを作っていこうと思います。

意外と簡単にできたので是非試してみてください。

伝えたいこと

この記事を読むことで、Laravel８系でページネーション機能が作れるようになります。

思った以上に簡単に作成できたので共有。

ページネーション機能の表示の部分はTailwindとかで編集できたりするので、どこを編集すればよいのかなども共有します！

今回は基本的なページネーション機能のみの説明です。

Laravel8でのページネーション機能作成
Tailwindでの表示を独自で整える

今回は以下のLaravelの公式サイトを参考に行います。

参考Database：ペジネーション 8.x LaravelLaravel8公式より

ページネーション機能を実装

controllerに実装する

今回はユーザーの一覧でページネーション機能をつけることを想定してみます。

そのためにもユーザーの一覧を表示するcontroller内でページネーションを追加してみましょう。

<?php

namespace App\Http\Controllers;

use App\Http\Controllers\Controller;

use App\Models\User; //追記


class UserController extends Controller
{
    //一覧表示
    public function index()
    {
        $users = User::Paginate(10); 
        return view('user.index', compact('users'));
    }
}Code language: HTML, XML (xml)

ここで行っているのはPaginateメソッドを利用して、ページネーション機能を作ります。

今回はEloquentを利用してページの分割をしていますが、
paginateメソッドを利用してページネーション機能を作ることも可能です。

アイテムをペジネーションする方法はいくつかあります。最も簡単な方法は、クエリビルダまたはEloquentクエリでpaginateメソッドを使用することです。paginateメソッドは、ユーザーが表示している現在のページに基づいて、クエリの”limit”と”offset”の設定を自動的に処理します。デフォルトでは、現在のページはHTTPリクエストのpageクエリ文字列引数の値から検出されます。この値はLaravelによって自動的に検出され、ペジネータが生成するリンクにも自動的に挿入されます。
https://readouble.com/laravel/8.x/ja/pagination.html

routeを記述

routes/web.php

<?php

use App\Http\Controllers\User\UserController;

Route::get('client', [UserController::class, 'index'])->name('user.list'); //ユーザー申請者一覧
Code language: HTML, XML (xml)

viewに追記する

すでに一覧画面があるところに以下を追記します。

resources/views/user/index.blade.php

<div>
    @foreach ($users as $user)
        {{ $user->name }}
    @endforeach
</div>

{{ $users->links() }}Code language: PHP (php)

linksメソッドを使うことでページネーション先のリンクを表示することができます。

公式からは以下のように説明されています。

linksメソッドは、結果セットの残りのページへのリンクをレンダーします。これらの各リンクには、適切なpageクエリ文字列変数がすでに含まれています。linksメソッドが生成するHTMLは、Tailwind CSSフレームワークと互換性があることを忘れないでください。
https://readouble.com/laravel/8.x/ja/pagination.html

これで基本的にOKですが、独自にページネーションをカスタマイズしてみましょう！

Tailwindを使ってページネーションをカスタマイズ

Tailwindの準備

Tailwindを利用する必要がありますので、以下よりTailwindを使えるようにしておいてください。

参考Laravel8でTailwindを使う準備をやってみた。東京初めてエンジニア

Tailwindをカスタマイズ

あらかじめ用意されたファイルを使うために以下コマンドを叩いてください。

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

すると、resources/view/vendor/pagination/というフォルダができるのでフォルダ内のファイルを修正してみて下さい。

このコマンドは、ビューをアプリケーションのresources/views/vendor/paginationディレクトリに配置します。このディレクトリ内のtailwind.blade.phpファイルが、デフォルトのペジネーションビューに対応しています。このファイルを編集して、ペジネーションHTMLを変更できます。
https://readouble.com/laravel/8.x/ja/pagination.html

はい、ページネーションビューをカスタマイズするために先ほど作成されたファイルを修正するとOK！

デフォルトはresources/view/vendor/pagination/tailwind.blade.phpファイルがページネーションに充てられているものになるので、

他のファイルを修正、指定したい場合は以下のように行います。

どのファイルを修正すると良いのかは、linksメソッドの引数にview名を渡しましょう。

{{ $paginator->links('view.name') }}

// ビューに追加データを渡す
{{ $paginator->links('view.name', ['foo' => 'bar']) }}Code language: PHP (php)

これで完璧だ！

まとめ

意外とページネーション機能も簡単に作れたかと思います。

少しデザインを凝りたい方はTailwindとかをいじってみるのが良いかと思います～