Pagination

The pagination component is used to navigate through a list of items. It can be used by passing basic-components::components.blade.pagination as the view parameter of the links method.

If you use multiple pagination components on the same page, you have to pass the pageName parameter to the ->links(data: ['pageName' => '...']) array.

 1# Livewire Component:
 2use Livewire\Component;
 3use Livewire\WithPagination;
 4 
 5class SearchResults extends Component {
 6    use WithPagination;
 7 
 8    public function render(){
 9        $results = User::where(...)->paginate(10);
10 
11        return view('pages.search-results', ['results' => $results]);
12    }
13}
14 
15# Blade View:
16<html>
17    <body>
18        [...]
19 
20        {{ $results
21            ->links(
22                view: 'basic-components::components.blade.pagination',
23                data: [
24                    'scrollTo' => '#container',     # Scroll to the element with the id 'container' after clicking on a pagination link
25                    'prevIcon' => 'chevron-left--micro', # Use the 'chevron-left--micro' icon for the previous button
26                    'nextIcon' => 'chevron-right--micro', # Use the 'chevron-right--micro' icon for the next button
27                ]
28        ) }}
29 
30    </body>
31</html>