前回の記事の続きです。
この記事のゴール
前回は単純にデフォルトのページネーション表示をしました。
今回は出力調整と動作確認を行っていきます。
これからやること
- コントローラー編集(onEachSide)
- ブラウザ確認(onEachSide)
- Paginationコンポーネント編集(Previous/Next置換)
- Inertiaテンプレート編集(Previous/Next置換)
- ブラウザ確認(Previous/Next置換)
- アイコン画像の適用
コントローラー編集(onEachSide)
前回の実装はデフォルトなので、現在のページの両脇は3件ずつ表示になっています。

長すぎるので、両脇を1件ずつに変更していきます。
「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ブラウザを再読み込みします。

このように、現在のページ「8」の両脇が1件ずつに変更されました。
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: '« Previous'
},
nextLabel: {
type: String,
default: 'Next »'
}
},
methods: {
getLabel (label) {
return label === '« Previous'
? this.previousLabel
: ( label === 'Next »' ? 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 }} <{{ item.email }}>
</li>
</ul>
</div>
</layout>
</template>
<script>
import Pagination from '@/Components/Pagination.vue'
export default {
components: {
Pagination
},
props: {
usersList: Object,
}
}
</script>
ブラウザ確認(Previous/Next置換)
WEBブラウザを再読み込みします。

このように表示も変更されました。
アイコン画像の適用
Paginationコンポーネントに追加した2つの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 }} <{{ item.email }}>
</li>
</ul>
</div>
</layout>
</template>
<script>
import Pagination from '@/Components/Pagination.vue'
export default {
components: {
Pagination
},
props: {
usersList: Object,
}
}
</script>
WEBブラウザを再読み込みします。

このようにアイコン画像が適用されます。
今回はここまでです。お疲れさまでした。
続きはこちらです。
コメント