【Laravel10 + Inertia + Vue3】Paginationを実装する(2)

前回の記事の続きです。

この記事のゴール
これからやること
コントローラー編集（onEachSide）
ブラウザ確認（onEachSide）
Paginationコンポーネント編集（Previous/Next置換）
Inertiaテンプレート編集（Previous/Next置換）
ブラウザ確認（Previous/Next置換）
アイコン画像の適用

この記事のゴール

前回は単純にデフォルトのページネーション表示をしました。

今回は出力調整と動作確認を行っていきます。

これからやること

コントローラー編集（onEachSide）
ブラウザ確認（onEachSide）
Paginationコンポーネント編集（Previous/Next置換）
Inertiaテンプレート編集（Previous/Next置換）
ブラウザ確認（Previous/Next置換）
アイコン画像の適用

コントローラー編集（onEachSide）

前回の実装はデフォルトなので、現在のページの両脇は3件ずつ表示になっています。

長すぎるので、両脇を１件ずつに変更していきます。

「app/Http/Controllers/UsersController.php」を編集・保存します。

<?php

namespace App\Http\Controllers;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Inertia\Inertia;
use App\Models\User;

class UsersController extends Controller
{
    public function index(Request $request)
    {
        return Inertia::render('UsersList', [
            'usersList' => User::paginate(10)->onEachSide(1),
        ]);
    }
}

「paginate(10)」に続けて「->onEachSide(1)」とするだけです。

ブラウザ確認（onEachSide）

WEBブラウザを再読み込みします。

このように、現在のページ「８」の両脇が１件ずつに変更されました。

Paginationコンポーネント編集（Previous/Next置換）

筆者個人的には、「≪ Previous」「Next ≫」は長いと思うので、

短く「＜」「＞」のように変更していきます。

コンポーネントのPropsとして好きな文字列を渡せるようにしていきます。

「resouces/js/Components/Pagination.vue」を編集・保存します。

<template>
    <div v-if="links.length > 3">
        <div class="flex flex-wrap -mb-1">
            <template v-for="(link, p) in links" :key="p">
                <div v-if="link.url === null"
                    class="mr-1 mb-1 px-4 py-3 text-sm leading-4 text-gray-400 border rounded"
                    v-html="getLabel(link.label)"
                />
                <Link v-else
                    class="mr-1 mb-1 px-4 py-3 text-sm leading-4 border rounded hover:bg-yellow-400 focus:border-indigo-500 focus:text-indigo-500"
                    :class="{ 'bg-blue-700 text-white hover:bg-blue-600': link.active }"
                    :href="link.url"
                    v-html="getLabel(link.label)"
                />
            </template>
        </div>
    </div>
</template>
<script>
import { Link } from "@inertiajs/vue3";
export default {
    components: {
        Link,
    },
    props: {
        links: Array,
        previousLabel: {
            type: String,
            default: '&laquo; Previous'
        },
        nextLabel: {
            type: String,
            default: 'Next &raquo;'
        }
    },
    methods: {
        getLabel (label) {
            return label === '&laquo; Previous' 
                   ? this.previousLabel
                   : ( label === 'Next &raquo;' ? this.nextLabel : label);
        }
    }
}
</script>

Inertiaテンプレート編集（Previous/Next置換）

「resources/js/Pages/UsersList.vue」を編集・保存します。

PaginationコンポーネントへPropsとして「≪ Previous」「Next ≫」のラベルとして別の文字列を渡すように変更します。

<template>
    <layout title="Users">
      <div class="container mt-5">

        <Pagination
            class="mt-6"
            :links="usersList.links"
            previousLabel="<"
            nextLabel=">"
        />
        <ul>
            <li v-for="item in usersList.data"
                :key="item.id"
                class="p-2 hover:bg-green-200 rounded-lg"
            >
            {{ item.id }}: {{ item.name }} &lt;{{ item.email }}&gt;
            </li>
        </ul>
      </div>
    </layout>
  </template>
    
  <script>
  import Pagination from '@/Components/Pagination.vue'
    
  export default {
    components: {
      Pagination
    },
    props: {
      usersList: Object,
    }
  }
  </script>

ブラウザ確認（Previous/Next置換）

WEBブラウザを再読み込みします。

このように表示も変更されました。

アイコン画像の適用

Paginationコンポーネントに追加した２つのProps

「previousLabel」と「nextLabel」にはHTMLを渡せるようになっています。

したがって、アイコン画像をIMGタグで指定することも可能です。

「public/」フォルダ内に「img/」フォルダを作成し、

その中にアイコン画像を保存します。

Inertiaテンプレート側で、PaginationコンポーネントのPropsとしてIMGタグを渡すように変更します。

「resources/js/Pages/UsersList.vue」を編集・保存します。

<template>
    <layout title="Users">
      <div class="container mt-5">

        <Pagination
            class="mt-6"
            :links="usersList.links"
            previousLabel="<img src='/img/previous.png' width='16' height='16' alt='Previous' title='Prev'>"
            nextLabel="<img src='/img/next.png' width='16' height='16' alt='Next' title='Next'>"
        />
        <ul>
            <li v-for="item in usersList.data"
                :key="item.id"
                class="p-2 hover:bg-green-200 rounded-lg"
            >
            {{ item.id }}: {{ item.name }} &lt;{{ item.email }}&gt;
            </li>
        </ul>
      </div>
    </layout>
  </template>
    
  <script>
  import Pagination from '@/Components/Pagination.vue'
    
  export default {
    components: {
      Pagination
    },
    props: {
      usersList: Object,
    }
  }
  </script>

WEBブラウザを再読み込みします。