Livewireはコンポーネント内で結果をペジネーションする機能を提供します。この機能はLaravelのネイティブページネーション機能にフックしているため、目に見えない機能のように感じるはずです。
ペジネーションデータ
show-postsコンポーネントがあり、結果を１ページあたり１０件の投稿に制限したいとします。
Livewireが提供するWithPaginationトレイトを使用して、結果をページ分割できます。
use Livewire\WithPagination;
class ShowPosts extends Component
{
use WithPagination;
public function render()
{
return view('livewire.show-posts', [
'posts' => Post::paginate(10),
]);
}
}<div>
@foreach ($posts as $post)
...
@endforeach
{{ $posts->links() }}
</div>これで、投稿の下部にさまざまなページのHTMLリンクがレンダーリングされ、結果がページ付けされます。
データのフィルタリング後のペジネーションリセット
ペジネーションした結果セットをフィルタリングするときの一般的なパターンは、フィルタリングを適用したときに現在のページを"1"にリセットすることです。
たとえば、ユーザーがデータセットのページ"4"にアクセスし、検索フィールドに入力して結果を絞り込む場合、通常はページを"1"にリセットするのが望ましいでしょう。
LivewireのWithPaginationトレイトは、これを行うために->resetPage()メソッドを用意しています。
このメソッドは、updating/updatedライフサイクルフックと組み合わせて使用して、特定のコンポーネントデータが更新されたときにページをリセットできます。
use Livewire\WithPagination;
class ShowPosts extends Component
{
use WithPagination;
public $search = '';
public function updatingSearch()
{
$this->resetPage();
}
public function render()
{
return view('livewire.show-posts', [
'posts' => Post::where('title', 'like', '%'.$this->search.'%')->paginate(10),
]);
}
}Bootstrapページネーションテーマの使用
Laravelと同様に、Livewireのデフォルトのペジネーションビューはスタイル設定にTailwindクラスを使用します。アプリケーションでBootstrapを使用する場合は、コンポーネントの$paginationThemeプロパティを使用して、ページネーションビューのBootstrapテーマを有効にできます。
class ShowPosts extends Component
{
use WithPagination;
protected $paginationTheme = 'bootstrap';カスタムページネーションビューの使用
Livewireは、$results->links()を呼び出すときにレンダーされる、ページネーションリンクのBladeビューをカスタマイズする方法を３つ提供しています。
方法Ａ:ビュー名を->links()メソッドへ直接渡します。
<div>
@foreach ($posts as $post)
...
@endforeach
{{ $posts->links('custom-pagination-links-view') }}
</div>方法Ｂ:コンポーネントのpaginationView()メソッドをオーバーライドします。
class ShowPosts extends Component
{
use WithPagination;
...
public function paginationView()
{
return 'custom-pagination-links-view';
}
...
}方法Ｃ: LiveWireのペジネーションビューをリソース公開します。
Livewireのページネーションビューをresources/views/vendor/livewireに公開するには、以下のArtisanコマンドを使用します。
php artisan livewire:publish --paginationNote: 残念ながらLivewireは、
Paginator::defaultView()を使用してサービスプロバイダー内で定義したカスタムビューを上書きします。
どのメソッドを使用する場合も、ペジネーションコンポーネントでアンカータグの代わりに、次のメソッドで wire:clickハンドラーを使用する必要があります。
nextPage次のページに移動previousPage前のページに移動gotoPage($page)特定のページに移動
デフォルトのlivewireペジネタがどのように機能するかについては、以下の例を参考にしてください。
@if ($paginator->hasPages())
<nav role="navigation" aria-label="Pagination Navigation" class="flex justify-between">
{{-- Previous Page Link --}}
@if ($paginator->onFirstPage())
<span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
{!! __('pagination.previous') !!}
</span>
@else
<a href="{{ $paginator->previousPageUrl() }}" rel="prev" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
{!! __('pagination.previous') !!}
</a>
@endif
{{-- Next Page Link --}}
@if ($paginator->hasMorePages())
<a href="{{ $paginator->nextPageUrl() }}" rel="next" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
{!! __('pagination.next') !!}
</a>
@else
<span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
{!! __('pagination.next') !!}
</span>
@endif
</nav>
@endif