You're browsing the documentation for an old version of Livewire. Consider upgrading your project to Livewire 2.x.

Pagination

Livewire offers the ability to paginate results within a component. This feature hooks into Laravel's native pagination features, so it should feel like an invisible feature to you.

Paginating Data

Let's say you have a show-posts component, but you want to limit the results to 10 posts per page.

You can paginate the results by using the WithPagination trait provided by Livewire.

            
1use Livewire\Component;
2use Livewire\WithPagination;
3 
4class ShowPosts extends Component
5{
6 use WithPagination;
7 
8 public function render()
9 {
10 return view('livewire.show-posts', [
11 'posts' => Post::paginate(10),
12 ]);
13 }
14}
            
1<div>
2 @foreach ($posts as $post)
3 ...
4 @endforeach
5 
6 {{ $posts->links() }}
7</div>

Now there will be rendered HTML links for the different pages at the bottom of your posts, and the results will be paginated.

Resetting Pagination After Filtering Data

A common pattern when filtering a paginated result set is to reset the current page to "1" when filtering is applied.

For example, If a user visits page "4" of your data set, then types into a search field to narrow the results, it is usually desireable to reset the page to "1".

Livewire's WithPagination trait exposes a ->resetPage() method to accomplish this.

This method can be used in combination with the updating/updated lifecycle hooks to reset the page when certain component data is updated.

            
1use Livewire\Component;
2use Livewire\WithPagination;
3 
4class ShowPosts extends Component
5{
6 use WithPagination;
7 
8 public $search = '';
9 
10 public function updatingSearch()
11 {
12 $this->resetPage();
13 }
14 
15 public function render()
16 {
17 return view('livewire.show-posts', [
18 'posts' => Post::where('title', 'like', '%'.$this->search.'%')->paginate(10),
19 ]);
20 }
21}

Using A Custom Pagination View

Livewire provides 2 ways to customize the pagination links Blade view, rendered when calling $results->links().

Method A: Pass view name directly to the ->links() method.

        
1<div>
2 @foreach ($posts as $post)
3 ...
4 @endforeach
5 
6 {{ $posts->links('custom-pagination-links-view') }}
7</div>

Method B: Override the paginationView() method in your component.

        
1class ShowPosts extends Component
2{
3 use WithPagination;
4 
5 ...
6 
7 public function paginationView()
8 {
9 return 'custom-pagination-links-view';
10 }
11 
12 ...
13}
Unfortunately, Livewire will overwrite a custom view you have defined inside a service provider using: Paginator::defaultView().

When using either method, instead of anchor tags in your pagination component, you should use wire:click handlers with the following methods:

  • nextPage to navigate to the next page
  • previousPage to navigate to the previous page
  • gotoPage($page) to navigate to a specific page.

See below for an example of how the default livewire paginator works.

        
1@if ($paginator->hasPages())
2 <ul class="pagination" role="navigation">
3 {{-- Previous Page Link --}}
4 @if ($paginator->onFirstPage())
5 <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
6 <span class="page-link" aria-hidden="true">
7 <span class="d-none d-md-block">&lsaquo;</span>
8 <span class="d-block d-md-none">@lang('pagination.previous')</span>
9 </span>
10 </li>
11 @else
12 <li class="page-item">
13 <button type="button" class="page-link" wire:click="previousPage" rel="prev" aria-label="@lang('pagination.previous')">
14 <span class="d-none d-md-block">&lsaquo;</span>
15 <span class="d-block d-md-none">@lang('pagination.previous')</span>
16 </button>
17 </li>
18 @endif
19 
20 {{-- Pagination Elements --}}
21 @foreach ($elements as $element)
22 {{-- "Three Dots" Separator --}}
23 @if (is_string($element))
24 <li class="page-item disabled d-none d-md-block" aria-disabled="true"><span class="page-link">{{ $element }}</span></li>
25 @endif
26 
27 {{-- Array Of Links --}}
28 @if (is_array($element))
29 @foreach ($element as $page => $url)
30 @if ($page == $paginator->currentPage())
31 <li class="page-item active d-none d-md-block" aria-current="page"><span class="page-link">{{ $page }}</span></li>
32 @else
33 <li class="page-item d-none d-md-block"><button type="button" class="page-link" wire:click="gotoPage({{ $page }})">{{ $page }}</button></li>
34 @endif
35 @endforeach
36 @endif
37 @endforeach
38 
39 {{-- Next Page Link --}}
40 @if ($paginator->hasMorePages())
41 <li class="page-item">
42 <button type="button" class="page-link" wire:click="nextPage" rel="next" aria-label="@lang('pagination.next')">
43 <span class="d-block d-md-none">@lang('pagination.next')</span>
44 <span class="d-none d-md-block">&rsaquo;</span>
45 </button>
46 </li>
47 @else
48 <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
49 <span class="page-link" aria-hidden="true">
50 <span class="d-block d-md-none">@lang('pagination.next')</span>
51 <span class="d-none d-md-block">&rsaquo;</span>
52 </span>
53 </li>
54 @endif
55 </ul>
56@endif
← Previous Topic

Authorization

Next Topic →

Redirecting