You're browsing the documentation for an old version of Livewire. Consider upgrading your project to Livewire 3.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}

app/Http/Livewire/ShowPosts.php

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

resources/views/livewire/show-posts.blade.php

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}

app/Http/Livewire/ShowPosts.php

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