Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Laravel Pagination "Three Dots" Separator customization

Im currently using Laravel 5.3 and was wondering if there is a option for the customization of the Three Dots deperator. (skips page 9-10, which is to late)

Example

Currently the Three dots initiate if there are more than 11 pages... Which isnt quiet useful if your site is responsive. if there are to many pages so it breaks into 2 lines.

Example2

I cannot find anything regarding there being options for $resource->links(). But if there is please tell me! Much appreciated.

Edit: it has to do with the following function: vendor/laravel/framework/src/Illuminate/Pagination/LengthAwarePaginator.php (page: 128, render()). The current function does not support a second variable. So i guess i have to rebuild it?

like image 683
user3410823 Avatar asked Sep 15 '16 21:09

user3410823


2 Answers

This is a solution for Laravel 5.5+. Here is what it does:

  • Shows the first and the last page.
  • Shows previous and next two pages from the current page.
  • Three dots only appear on the left after the current page is greater than 4.
  • Three dots only appear on the right after the current page is less than the 4 - (count of pages).
<!-- Pagination Elements -->
@foreach ($elements as $element)
    <!-- Array Of Links -->
    @foreach ($element as $page => $url)
        <!--  Use three dots when current page is greater than 4.  -->
        @if ($paginator->currentPage() > 4 && $page === 2)
            <li class="page-item disabled"><span class="page-link">...</span></li>
        @endif

        <!--  Show active page else show the first and last two pages from current page.  -->
        @if ($page == $paginator->currentPage())
            <li class="page-item active"><span class="page-link">{{ $page }}</span></li>
        @elseif ($page === $paginator->currentPage() + 1 || $page === $paginator->currentPage() + 2 || $page === $paginator->currentPage() - 1 || $page === $paginator->currentPage() - 2 || $page === $paginator->lastPage() || $page === 1)
            <li class="page-item"><a class="page-link" href="{{ $url }}">{{ $page }}</a></li>
        @endif

        <!--  Use three dots when current page is away from end.  -->
        @if ($paginator->currentPage() < $paginator->lastPage() - 3 && $page === $paginator->lastPage() - 1)
            <li class="page-item disabled"><span class="page-link">...</span></li>
        @endif
    @endforeach
@endforeach

Output:

Page 1 (first page)

Page 3

Page 10 (last page)

like image 121
Johnny Avatar answered Nov 14 '22 23:11

Johnny


Adding to the previous response, once you generate the vendor view files with the artisan command php artisan vendor:publish you can create a new one in that folder and call it for example custom.blade.php and put the following code:

@if ($paginator->hasPages())
<ul class="custom-pagination">
    {{-- Previous Page Link --}}
    @if ($paginator->onFirstPage())
        <li class="disabled pageNumber"><span>&laquo; Prev</span></li>
    @else
        <li><a class="pageNumber" href="{{ $paginator->previousPageUrl() }}" rel="prev">&laquo;</a></li>
    @endif

    {{-- Pagination Elements --}}
    @foreach ($elements as $element)
        {{-- Array Of Links --}}
        @if (is_array($element))
            @foreach ($element as $page => $url)
                @if ($page === $paginator->currentPage())
                    <li class="active pageNumber"><span>{{ $page }}</span></li>
                @elseif (($page === $paginator->currentPage() + 1 || $page === $paginator->currentPage() + 2)
                 || $page === $paginator->lastPage())
                    <li><a class="pageNumber" href="{{ $url }}">{{ $page }}</a></li>
                @elseif ($page === $paginator->lastPage()-1)
                    <li class="disabled"><span>...</span></li>
                @endif
            @endforeach
        @endif
    @endforeach

    {{-- Next Page Link --}}
    @if ($paginator->hasMorePages())
        <li><a class="pageNumber" href="{{ $paginator->nextPageUrl() }}" rel="next">Next &raquo;</a></li>
    @else
        <li class="disabled pageNumber"><span>Next &raquo;</span></li>
    @endif
</ul>@endif

The important part of the code for the three dots is in the {{-- Array Of Links --}} portion. I think this more or less does what you need but may require additional tweaking.

then you can use it in your view like this:

<div class="pagination">
    @if ($users instanceof \Illuminate\Pagination\LengthAwarePaginator)
        {{ $users->links('vendor.pagination.custom') }}
    @endif
</div>
like image 25
Bitclaw Avatar answered Nov 14 '22 23:11

Bitclaw