Limit amount of links shown with Laravel pagination Limit amount of links shown with Laravel pagination laravel laravel

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">&lsaquo;</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