Пагинация в Inertia

Давайте рассмотрим ситуацию, когда записей больше, чем помещается на один экран. Все заголовки сразу неудобны, а человеку нужен короткий фрагмент списка.

Метод paginate отдаёт одну страницу строк. Сами записи лежат в поле data объекта, адрес следующей и предыдущей страницы - в next_page_url и prev_page_url. Переход делают компонентом Link: иначе браузер скачает документ как при обычной ссылке.

Давайте отдадим по две записи на страницу:

<?php
	use App\Models\Post;
	use Illuminate\Support\Facades\Route;
	use Inertia\Inertia;

	Route::get('/posts', function () {
		return Inertia::render('Posts/Index', [
			'posts' => Post::orderBy('id')->paginate(2),
		]);
	});
?>

Давайте выведем строки текущей страницы и ссылки перехода:

<script setup>
	import { Link } from '@inertiajs/vue3'

	defineProps({
		posts: Object,
	})
</script>

<template>
	<div
		v-for="post in posts.data"
		:key="post.id"
	>
		{{ post.title }}
	</div>
	<Link
		v-if="posts.prev_page_url"
		:href="posts.prev_page_url"
	>
		Previous
	</Link>
	<Link
		v-if="posts.next_page_url"
		:href="posts.next_page_url"
	>
		Next
	</Link>
</template>

Сделайте список работников по две строки на экран, чтобы переход на следующую страницу не скачивал документ заново.