Limit amount of links shown with Laravel pagination
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
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
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).
Example
Three dots handled correctly
From laravel 8 docs. If needed, you may control how many additional links are displayed on each side of the current page using the onEachSide
method in blade:
{{ $posts->onEachSide(1)->links() }}