leandromatos's avatar

How to change number of pages appear on pagination slide?

The default pagination of Laravel 5.6 has 8 items before three dots (...) and 2 after.

How to change this size of 8 items? The pagination element too large in mobile viewport.

0 likes
6 replies
jlrdw's avatar

@Cronix actually not, his new method still shows second page and next to last page.

So even in ver 5.7 you can remove that as well with a custom template.

Here's what I use.

And I have already tested 5.7.

leandromatos's avatar
leandromatos
OP
Best Answer
Level 34

Thanks for sharing your model @jlrdw.

I mixed the default pagination and the new option of slide pagination on Laravel 5.7 that @Cronix sharing with us.

Maybe it will serve as a model for someone else who needs it.

@if ($paginator->hasPages())
    <ul class="pagination__items" role="navigation">
        {{-- Previous Page Link --}}
        @if ($paginator->onFirstPage())
            <li class="pagination__item pagination__item--disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
                <span aria-hidden="true">
                    ‹
                </span>
            </li>
        @else
            <li class="pagination__item">
                <a href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')">
                    <span>
                        ‹
                    </span>
                </a>
            </li>
        @endif

        {{-- Pagination Elements --}}
        @php
        $linksOnEachSlide     = 5; // Must be an odd number
        $halfLinksOnEachSlide = ($linksOnEachSlide - 1) / 2;
        $startPage            = $paginator->currentPage() - $halfLinksOnEachSlide < 1 ? 1 : ($paginator->currentPage() - $halfLinksOnEachSlide);
        $endPage              = ($paginator->currentPage() + $halfLinksOnEachSlide) > $paginator->lastPage() ? $paginator->lastPage() : ($paginator->currentPage() + $halfLinksOnEachSlide);
        $endPage              = $endPage < $linksOnEachSlide ? $linksOnEachSlide : $endPage;
        $startPage            = $endPage - $linksOnEachSlide < $startPage ? $endPage - ($halfLinksOnEachSlide * 2) : $startPage;
        @endphp

        @foreach(range($startPage, $endPage) as $page)
            @if ($page == $paginator->currentPage())
                <li class="pagination__item pagination__item--active" aria-current="page">
                    <span>
                        {{ $page }}
                    </span>
                </li>
            @else
                <li class="pagination__item">
                    <a href="{{ $paginator->url($page) }}">
                        <span>
                            {{ $page }}
                        </span>
                    </a>
                </li>
            @endif
        @endforeach

        {{-- Next Page Link --}}
        @if ($paginator->hasMorePages())
            <li class="pagination__item">
                <a href="{{ $paginator->nextPageUrl() }}" rel="next" aria-label="@lang('pagination.next')">
                    <span>
                        ›
                    </span>
                </a>
            </li>
        @else
            <li class="pagination__item pagination__item--disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
                <span aria-hidden="true">
                    ›
                </span>
            </li>
        @endif
    </ul>
@endif

{{-- Output: 6 7 [8] 9 10 --}}
jlrdw's avatar

Do you still have previous and next.

And you know the simple paginating can also be used on on mobile.

Please or to participate in this conversation.