fit pagination on mobile devices

I can`t fit on mobile device the pagination. (laravel 6 and bootstrap 4)

I found this function for pagination ( onEachSide() )

 $products->onEachSide(1)->links()

The results are ok when the page loads (screenshot attached):

https://www.dropbox.com/s/k2aitr40ofastq3/pag_initial.png

But the problem is when click on 3 and so on.... (screenshot attached):

https://www.dropbox.com/s/2rjmsmxpuh8nclh/pag_after.png

calin.ionut

6 years ago

Level 5

I think I just solved :)

Created a custom pagiation mobile-pagination-template.blade.php:

@if ($paginator->hasPages())
    <ul class="pagination pagination">
        {{-- Previous Page Link --}}
        @if ($paginator->onFirstPage())
            <li class="page-item disabled"><span class="page-link">‹</span></li>
        @else
            <li class="page-item"><a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev">‹</a></li>
        @endif

        @if($paginator->currentPage() > 2)
            <li class="page-item hidden-xs"><a class="page-link" href="{{ $paginator->url(1) }}">1</a></li>
        @endif
        @if($paginator->currentPage() > 3)
            <li class="page-item"><span class="page-link">...</span></li>
        @endif
        @foreach(range(1, $paginator->lastPage()) as $i)
            @if($i >= $paginator->currentPage() - 1 && $i <= $paginator->currentPage() + 1)
                @if ($i == $paginator->currentPage())
                    <li class="page-item active"><span class="page-link">{{ $i }}</span></li>
                @else
                    <li class="page-item"><a class="page-link" href="{{ $paginator->url($i) }}">{{ $i }}</a></li>
                @endif
            @endif
        @endforeach
        @if($paginator->currentPage() < $paginator->lastPage() - 2)
            <li class="page-item"><span class="page-link">...</span></li>
        @endif
        @if($paginator->currentPage() < $paginator->lastPage() - 1)
            <li class="page-item hidden-xs"><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">›</a></li>
        @else
            <li class="page-item disabled"><span class="page-link">›</span></li>
        @endif
    </ul>
@endif

and in product page:

{{ $products->links('components.mobile.mobile-pagination-template') }}

2 likes