Laravel custom pagination

Posted on By
paginate-img

Custom pagination easy to create in laravel. Example we have a html like below

<div class="pager">
    <a href="#"><i class="fa-solid fa-chevron-left"></i><span>前へ</span></a>
    <a href="#" class="page-num">1</a>
    <a href="#" class="page-num">2</a>
    <a href="#" class="page-num">3</a>
    <a href="#" class="page-num">4</a>
    <span class="current page-num">5</span>
    <a href="#" class="page-num">6</a>
    <a href="#" class="page-num">7</a>
    <a href="#" class="page-num">8</a>
    <a href="#" class="page-num">9</a>
    <a href="#"><span>次へ</span><i class="fa-solid fa-chevron-right"></i></a>
</div>

Output will example like below with my custom css

paginate-img

For custom design you can follow below tutorial in w3schools.com

https://www.w3schools.com/w3css/w3css_pagination.asp

 

Now , for convert this pagination in laravel we can create blade file example in location resources/views/elements/pagination.blade.php

The pagination file will looks like below

@if ($paginator->hasPages())

    <div class="pager">

        {{-- Previous Page Link --}}

        @if ($paginator->onFirstPage())

        <a class="disabled" href="{{ $paginator->previousPageUrl() }}"><i class="fa-solid fa-chevron-left"></i><span>前へ</span></a>

        @else

            <a href="{{ $paginator->previousPageUrl() }}"><i class="fa-solid fa-chevron-left"></i><span>前へ</span></a>

        @endif

        {{-- Pagination Elements --}}

        @foreach ($elements as $element)

            {{-- "Three Dots" Separator --}}

            @if (is_string($element))

                <a class="disabled" aria-disabled="true"><span>{{ $element }}</span></a>

            @endif

            {{-- Array Of Links --}}

            @if (is_array($element))

                @foreach ($element as $page => $url)

                    @if ($page == $paginator->currentPage())

                        <a class="current page-num" href="{{ $url }}">{{ $page }}</a>

                    @else

                        <a class="page-num" href="{{ $url }}">{{ $page }}</a>

                    @endif

                @endforeach

            @endif

        @endforeach

        {{-- Next Page Link --}}

        @if ($paginator->hasMorePages())

            <a href="{{ $paginator->nextPageUrl() }}"><span>次へ</span><i class="fa-solid fa-chevron-right"></i></a>

        @else

            <a class="disabled" aria-disabled="true" href="{{ $paginator->nextPageUrl() }}"><span>次へ</span><i class="fa-solid fa-chevron-right"></i></a>

        @endif

    </div>

@endif

Now , In view file you can add your pagination like below

{{ $books->links('../elements/pagination') }}

Here books is your object which you have sent from controller.

Now your output should like

output image