【Laravel10】Paginationの使い方(3)

前回の記事の続きです。

前回はテンプレートを改造していきましたが、

今回は(URL)パラメータの受け渡しを行います。

この記事のゴール
具体的に何をするのか
コントローラー編集
ビューファイル編集
ブラウザで表示確認

この記事のゴール

ページネーションのリンクに独自のURLパラメータを渡し、

コントローラー側でパラメータの受取と処理、

ビュー側でパラメータの反映を行います。

具体的に何をするのか

１ページあたりの表示件数の選択と表示への反映
ユーザーメールアドレスのドメインで絞り込み
並び順の昇順／降順の切替

１ページあたりの表示件数をプルダウンメニューで選択できるようにします。

変数名は「perPage」とします。デフォルトは10です。

ユーザーメールアドレスのドメイン名（@以降）をプルダウンメニューで選択できるようにします。

変数名は「domain」とします。デフォルトは空文字列（絞り込みなし）です。

並び順の「昇順」「降順」をプルダウンメニューで選択できるようにします。

変数名は「orderbyID」とします。デフォルトは「昇順」です。

表にまとめるとこのような感じです。

項目	ビュー	変数名 (URLパラメータ)	デフォルト
表示件数	プルダウン	perPage	10
ドメイン名	プルダウン	domain	空文字列
並び順	プルダウン	orderbyID	昇順(asc)

これらがURLパラメータとしてページネーションのリンクに反映されるようにします。

/users?domain=%40example.com&perPage=5&orderbyID=desc

のような感じになります。

コントローラー編集

「app/Http/Controllers/UsersController.php」を開いて編集します。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\User;

class UsersController extends Controller
{
    public function index(Request $request)
    {
        $domain = $request->query('domain') ?? '';
        $perPage = $request->query('perPage') ?? 10;
        $orderbyID = strcmp($request->query('orderbyID'), 'desc') === 0
                   ? 'desc'
                   : 'asc';
        return view('users', [
            'users' => User::where('email', 'LIKE', '%' . $domain)
                       ->orderby('id', $orderbyID)
                       ->paginate($perPage)
                       ->withQueryString(),
            'domains' => User::selectRaw(
                            "distinct
                            substr(email, instr(email,'@'), length(email))
                            as domain"
                         )
                         ->orderby("domain", "asc")->get(),
            'selectedDomain' => $domain,
            'perPages' => [5, 10, 20, 50, ],
            'orderbyID' => $orderbyID,
        ]);
    }
}

コントローラー側でURLパラメータを取得するには、

「Illuminate\Http\Request」クラスをメソッドの引数「$request」として受け取り、

$request->query(パラメータ名)

とすれば値を取得できます。

paginate()に続けてメソッドチェーンでwithQueryString()を付けると

URLパラメータをページネーションに引き継ぐことができます。

User::selectRaw(
    "distinct
    substr(email, instr(email,'@'), length(email))
    as domain"
)->get()

で「users」テーブルの全レコードを対象に、

「email」カラムの値の「@」以降（ドメイン）の

重複を除外した一覧を取得することができます。

ビューファイル編集

「resources\views\users.blade.php」を開いて編集します。

<script src="https://cdn.tailwindcss.com"></script>
<div class="container">
    {{ $users->onEachSide(1)->links() }}
    <form method="GET" action="" class="mx-2 my-2">
    絞り込み：ドメイン<select name="domain" onChange="submit(this.form)" class="bg-sky-100">
        <option value="">▼選択</option>
        @foreach ($domains as $domain)
        <option value="{{ $domain->domain }}" {{ strcmp($selectedDomain, $domain->domain) === 0 ? 'selected' : '' }}>{{ $domain->domain }}</option>
        @endforeach
    </select>
    表示件数：<select name="perPage" onChange="submit(this.form)" class="bg-sky-100">
        @foreach ($perPages as $perPage)
        <option value="{{ $perPage }}" {{ $users->perPage() === $perPage ? 'selected' : '' }}>{{ $perPage }}</option>
        @endforeach
    </select>件/ページ<br>
    並び順：ID<select name="orderbyID" onChange="submit(this.form)" class="bg-sky-100">
        <option value="asc" {{ strcmp('asc', $orderbyID) === 0 ? 'selected' : '' }}>昇順</option>
        <option value="desc" {{ strcmp('desc', $orderbyID) === 0 ? 'selected' : '' }}>降順</option>
    </select>
    </form>
    <ul class="p-6 divide-y divide-slate-200">
    @foreach ($users as $user)
    <li class="flex px-6 py-2 hover:bg-green-200 rounded-lg">{{ $user->id }}: {{ $user->name }} &lt;{{ $user->email }}&gt; {{ $user->domain }}</li>
    @endforeach
    </ul>
</div>

formタグ内に３つのプルダウン（selectタグ）を設置し、

それぞれの選択肢が変更されたらsubmitするようにしています。

ブラウザで表示確認

http://127.0.0.1:8000/users

にアクセスします。

このような感じの画面になっています。

「ドメイン」のプルダウンから「@example.com」を選択してみます。

画面が遷移し、このように表示が切り替わります。

ページのURLを見てみます。

http://127.0.0.1:8000/users?domain=%40example.com&perPage=10&orderbyID=asc

このようにURLパラメータが付いています。

「表示件数」を「５」に変更してみます。

このように画面が切り替わりました。

「並び順」を「降順」にしてみます。

このように画面が切り替わりました。

ページのリンクを辿ってみましょう。「６」をクリックしてみます。

各選択肢はキープされています。

ページのURLを確認してみます。

http://127.0.0.1:8000/users?domain=%40example.com&perPage=5&orderbyID=desc&page=6

URLパラメータが引き継がれていることがわかります。

今回は以上です。お疲れさまでした。