Постраничный список в Livewire

Давайте теперь представим, что постов в базе уже много. Страница тянет их все сразу, прокрутка длинная, и до дальних записей добираться неудобно.

Трейт WithPagination и выборка порциями через paginate помогают компоненту помнить номер страницы между запросами Livewire. При обновлении фрагмента человек остаётся на той же порции записей.

Пусть в проекте есть модель Post с полями заголовка и текста.

Давайте создадим компонент PostChunk:

php artisan make:livewire PostChunk --class

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

<?php
	Route::get('/posts', function () {
		return view('posts');
	});
?>

<x-layout>
	<livewire:post-chunk />
</x-layout>

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

<?php
	namespace App\Livewire;
	
	use App\Models\Post;
	use Livewire\Component;
	use Livewire\WithPagination;
	
	class PostChunk extends Component
	{
		use WithPagination;
		
		public function render()
		{
			$posts = Post::orderBy('id')
				->paginate(2);
			
			return view(
				'livewire.post-chunk',
				compact('posts')
			);
		}
	}
?>

Давайте в шаблоне выведем заголовки текущей порции:

<div>
	@foreach ($posts as $post)
		<div wire:key="{{ $post->id }}">
			{{ $post->title }}
		</div>
	@endforeach
</div>

Создайте компонент EmployeeChunk. На странице одновременно видны только двое работников, и номер страницы не теряется при обновлении фрагмента.