CODEWITHSUNDEEP
phplaraveltwitter-bootstrap-3laravel-5.3
user3410823
user3410823

Reputation: 55

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?

Upvotes: 5

Views: 12879

Answers (3)

Nirav Bhoi
Nirav Bhoi

Reputation: 659

Option 1 : You can customize default files but don't change vendor files directly. Publish them and then add modifications to that.

php artisan vendor:publish --tag=laravel-pagination

This command will automatically create the folder /resources/views/vendor/pagination and you have your files for modification. You can get more information here : laravel pagination

Option 2:

Maybe you want to get rid of the files that are generated by default. Or, perhaps you want to assign another file to be responsible for your default pagination view.

All of this is possible, but you will need to inform the AppServiceProvider for this action by calling the new pagination views in the boot() method:

use Illuminate\Pagination\Paginator;

public function boot(){
    Paginator::defaultView('your-pagination-view-file-name');

    Paginator::defaultSimpleView('your-pagination-view-file-name');
}

Get information for defaultView and defaultSimpleView here :laravel pagination

I have created new file for pagination and added in AppServiceProvider.

@if ($paginator->hasPages())
<ul class="blog-pagenation">
    {{-- Previous Page Link --}}
    @if ($paginator->onFirstPage())
        <li class="disabled"><a>«</a></li>
    @else
        <li><a href="{{ $paginator->previousPageUrl() }}" rel="prev">«</a></li>
    @endif

    @if($paginator->currentPage() > 3)
        <li class="hidden-xs"><a href="{{ $paginator->url(1) }}">1</a></li>
    @endif
    @if($paginator->currentPage() > 4)
        <li><a>...</a></li>
    @endif
    @foreach(range(1, $paginator->lastPage()) as $i)
        @if($i >= $paginator->currentPage() - 2 && $i <= $paginator->currentPage() + 2)
            @if ($i == $paginator->currentPage())
                <li class="active"><a class="active">{{ $i }}</a></li>
            @else
                <li><a href="{{ $paginator->url($i) }}">{{ $i }}</a></li>
            @endif
        @endif
    @endforeach
    @if($paginator->currentPage() < $paginator->lastPage() - 3)
        <li><a>...</a></li>
    @endif
    @if($paginator->currentPage() < $paginator->lastPage() - 2)
        <li class="hidden-xs"><a href="{{ $paginator->url($paginator->lastPage()) }}">{{ $paginator->lastPage() }}</a></li>
    @endif

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

By using this i am able to get 3 dots in starting and ending you have to customize classes based on your themes.

enter image description here

Upvotes: 4

Johnny
Johnny

Reputation: 316

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)

Upvotes: 9

Bitclaw
Bitclaw

Reputation: 831

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>

Upvotes: 1

Related Questions