Класс WithPagination

Класс WithPagination подключается к компоненту Livewire в виде трейта и добавляет полноценную пагинацию с автоматическим сохранением текущей страницы в URL через параметр page. Он использует стандартный пагинатор Laravel и работает с поставщиками данных через метод paginate. При переходе между страницами компонент не перезагружается полностью, а отправляет запрос только за новыми данными.

Синтаксис

<?php
	use Livewire\WithPagination;
	
	class Users extends Component
	{
		use WithPagination;
	}
?>

Пример

Давайте создадим компонент со списком пользователей, используя пагинацию по 5 записей на страницу:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	use Livewire\WithPagination;
	use App\Models\User;
	
	class Users extends Component
	{
		use WithPagination;
		
		public function render()
		{
			$users = User::paginate(5);
			
			return view('livewire.users', [
				'users' => $users,
			]);
		}
	}
?>

<div>
	@foreach ($users as $user)
		<div>
			{{ $user->name }}
		</div>
	@endforeach
	
	{{ $users->links() }}
</div>

Результат выполнения кода:

<div>
	<div>
		John Doe
	</div>
	<div>
		Jane Smith
	</div>
	<div>
		Mike Johnson
	</div>
	<div>
		Sarah Williams
	</div>
	<div>
		Tom Brown
	</div>
	<div>
		1 2 3 4 ... 20
	</div>
</div>

В URL-адресе автоматически добавится параметр page:

/users?page=2

Пример

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

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	use Livewire\WithPagination;
	use App\Models\Product;
	
	class Products extends Component
	{
		use WithPagination;
		
		public $perPage = 10;
		
		public function render()
		{
			$products = Product::paginate($this->perPage);
			
			return view('livewire.products', [
				'products' => $products,
			]);
		}
	}
?>

<div>
	<select wire:model.live="perPage">
		<option value="5">5</option>
		<option value="10">10</option>
		<option value="25">25</option>
	</select>
	
	@foreach ($products as $product)
		<div>
			{{ $product->name }}
		</div>
	@endforeach
	
	{{ $products->links() }}
</div>

При изменении значения в выпадающем списке пагинация автоматически сбросится на первую страницу благодаря директиве wire:model.live, а в URL обновится параметр page.

Пример

Давайте добавим поиск по пользователям с сохранением состояния пагинации:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	use Livewire\WithPagination;
	use App\Models\User;
	
	class SearchUsers extends Component
	{
		use WithPagination;
		
		public $search = '';
		
		public function updatingSearch()
		{
			$this->resetPage();
		}
		
		public function render()
		{
			$users = User::where('name', 'like', '%' . $this->search . '%')
				->paginate(5);
			
			return view('livewire.search-users', [
				'users' => $users,
			]);
		}
	}
?>

<div>
	<input type="text" wire:model.live.debounce="search" placeholder="Search users">
	
	@foreach ($users as $user)
		<div>
			{{ $user->name }}
		</div>
	@endforeach
	
	{{ $users->links() }}
</div>

Метод updatingSearch сбрасывает пагинацию на первую страницу при вводе текста поиска, чтобы результаты не противоречили текущей странице.

Смотрите также

метод resetPage,
который сбрасывает пагинацию на первую страницу
метод previousPage,
который переключает на предыдущую страницу
метод nextPage,
который переключает на следующую страницу
класс WithoutUrlPagination,
который отключает синхронизацию с URL