Limit amount of links shown with Laravel pagination
I used css to limit the links that I allowed. Really simple..this can be extended to show any number of pages, at any number of breakpoints
@media screen and ( max-width: 400px ){ li.page-item { display: none; } .page-item:first-child, .page-item:nth-child( 2 ), .page-item:nth-last-child( 2 ), .page-item:last-child, .page-item.active, .page-item.disabled { display: block; }}
this specific implementation allows the arrows, the '...', the first page, active page and last page
Now Laravel 5.7 has a new pagination method to customize the number of links on each side of the paginator. Thanks to the new method you no longer need a custom pagination view in some cases. Here’s the API you can use to define the link count on each side of the current page:
User::paginate(10)->onEachSide(2);
write that code on your controller.
you can see more detail at https://laravel-news.com/laravel-5-7-pagination-link-customizations
For Laravel 5.6+
Publish vendor template:
php artisan vendor:publish --tag=laravel-pagination
Edit bootstrap-4.blade.php
as following:
@if ($paginator->hasPages())<ul class="pagination" role="navigation"> {{-- Previous Page Link --}} @if ($paginator->onFirstPage()) <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')"> <span class="page-link" aria-hidden="true">‹</span> </li> @else <li class="page-item"> <a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')">‹</a> </li> @endif <?php $start = $paginator->currentPage() - 2; // show 3 pagination links before current $end = $paginator->currentPage() + 2; // show 3 pagination links after current if($start < 1) { $start = 1; // reset start to 1 $end += 1; } if($end >= $paginator->lastPage() ) $end = $paginator->lastPage(); // reset end to last page ?> @if($start > 1) <li class="page-item"> <a class="page-link" href="{{ $paginator->url(1) }}">{{1}}</a> </li> @if($paginator->currentPage() != 4) {{-- "Three Dots" Separator --}} <li class="page-item disabled" aria-disabled="true"><span class="page-link">...</span></li> @endif @endif @for ($i = $start; $i <= $end; $i++) <li class="page-item {{ ($paginator->currentPage() == $i) ? ' active' : '' }}"> <a class="page-link" href="{{ $paginator->url($i) }}">{{$i}}</a> </li> @endfor @if($end < $paginator->lastPage()) @if($paginator->currentPage() + 3 != $paginator->lastPage()) {{-- "Three Dots" Separator --}} <li class="page-item disabled" aria-disabled="true"><span class="page-link">...</span></li> @endif <li class="page-item"> <a class="page-link" href="{{ $paginator->url($paginator->lastPage()) }}">{{$paginator->lastPage()}}</a> </li> @endif {{-- Next Page Link --}} @if ($paginator->hasMorePages()) <li class="page-item"> <a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next" aria-label="@lang('pagination.next')">›</a> </li> @else <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')"> <span class="page-link" aria-hidden="true">›</span> </li> @endif</ul>@endif
This example handle in a correct way new CSS classes, active link, three dots (correctly, not 1..2 3 4) and is it customizable (number of pages that you want to show).