Open4
[laravel][Inertia]ページネーション
ターボのページネーションだけ
Git
ターボ
👽Pagination.vue
resources\js\Components\Pagination.vue
<script setup>
import { Link } from "@inertiajs/inertia-vue3";
defineProps({ links: Array });
</script>
<template>
<div v-if="links.length > 3">
<div class="flex flex-wrap -mb-1">
<template v-for="(link, index) in links" :key="index">
<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="link.label"
/>
<Link
v-else
class="mr-1 mb-1 px-4 py-3 text-sm leading-4 border rounded hover:bg-white focus:border-indigo-500 focus:text-indigo-500"
:class="{ 'bg-blue-700 text-white': link.active }"
:href="link.url"
v-html="link.label"
/>
</template>
</div>
</div>
</template>
🐸Index.vue
resources\js\Pages\Customers\Index.vue
<script setup>
import FlashMessage from "@/Components/FlashMessage.vue";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
import { Head, Link } from "@inertiajs/vue3";
import Pagination from "@/Components/Pagination.vue";
// コントローラーから受け取る場合は「defineProps」
defineProps({
customers: Object,
});
</script>
<template>
<Head title="顧客一覧" />
<AuthenticatedLayout>
<template #header>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">顧客一覧</h2>
</template>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 text-gray-900">
<section class="text-gray-600 body-font">
<div class="container px-5 py-8 mx-auto">
<FlashMessage />
<div class="flex pl-4 mt-4 lg:w-2/3 w-full mx-auto">
<Link as="button" :href="route('customers.create')" class="flex ml-auto text-white bg-green-500 border-0 py-2 px-6 focus:outline-none hover:bg-green-600 rounded">顧客登録</Link>
</div>
<div class="lg:w-2/3 w-full mx-auto overflow-auto">
<table
class="table-auto w-full text-left whitespace-no-wrap"
>
<thead>
<tr>
<th
class="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100 rounded-tl rounded-bl"
>
ID
</th>
<th
class="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100"
>
氏名
</th>
<th
class="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100"
>
カナ
</th>
<th
class="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100"
>
電話番号
</th>
</tr>
</thead>
<tbody>
<tr v-for="customer in customers.data" :key="customer.id">
<td class="border-b-2 border-gray-200 px-4 py-3">{{ customer.id }}</td>
<td class="border-b-2 border-gray-200 px-4 py-3">{{ customer.name }}</td>
<td class="border-b-2 border-gray-200 px-4 py-3">{{ customer.kana }}</td>
<td class="border-b-2 border-gray-200 px-4 py-3">{{ customer.tel }}</td>
</tr>
</tbody>
</table>
</div>
</div>
<Pagination class="mt-6" :links="customers.links"></Pagination>
</section>
</div>
</div>
</div>
</div>
</AuthenticatedLayout>
</template>
🦏CustomerController.php
app\Http\Controllers\CustomerController.php
<?php
namespace App\Http\Controllers;
use App\Models\Customer;
use App\Http\Controllers\Controller;
use App\Http\Requests\StoreCustomerRequest;
use App\Http\Requests\UpdateCustomerRequest;
use Inertia\Inertia;
class CustomerController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
// $getTest = Customer::select('id','name','kana','tel')->get();
// $getPaginate = Customer::select('id','name','kana','tel')->paginate(50);
// dd($getTest,$getPaginate);
return Inertia::render('Customers/Index',[
'customers' => Customer::select('id','name','kana','tel')->paginate(50)
]);
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
//
}
/**
* Store a newly created resource in storage.
*
* @param \App\Http\Requests\StoreCustomerRequest $request
* @return \Illuminate\Http\Response
*/
public function store(StoreCustomerRequest $request)
{
//
}
/**
* Display the specified resource.
*
* @param \App\Models\Customer $customer
* @return \Illuminate\Http\Response
*/
public function show(Customer $customer)
{
//
}
/**
* Show the form for editing the specified resource.
*
* @param \App\Models\Customer $customer
* @return \Illuminate\Http\Response
*/
public function edit(Customer $customer)
{
//
}
/**
* Update the specified resource in storage.
*
* @param \App\Http\Requests\UpdateCustomerRequest $request
* @param \App\Models\Customer $customer
* @return \Illuminate\Http\Response
*/
public function update(UpdateCustomerRequest $request, Customer $customer)
{
//
}
/**
* Remove the specified resource from storage.
*
* @param \App\Models\Customer $customer
* @return \Illuminate\Http\Response
*/
public function destroy(Customer $customer)
{
//
}
}