How to customize default pagination in laravel 8?

Viewed 6696

I'm building an application where some page needs pagination. I already made a design for my application's pagination. But how can I use that with laravel paginate?

I did this for paginate in the controller

 $products= Products::paginate(9);

In my blade, this is my desired HTML for pagination

          <div class="row pt-3 pb-5">
            <div class="col-12 d-flex justify-content-end">
                <div class="pagination-btn-box">
                    <button class="active-pagination-btn">1</button>
                    <button>2</button>
                    <button>3</button>
                    <button>4</button>
                    <button>5</button>
                    <button>...</button>
                    <button>Next</button>
                </div>
            </div>
        </div>

Now, How can I implement this with laravel for paginating?

1 Answers

In controller return view

return view('blade file name',compact('products'))

in blade do like below

<div class="container">
    @foreach ($products as $product)
        {{ $product->fieldname}}
    @endforeach
</div>

{{ $products->links() }}

$products->links() will generate default pagination.

if you want to customize pagination template then run following command

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

this will generate folder in views/vendor/pagination

default.blad.php look like below

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

            {{-- Pagination Elements --}}
            @foreach ($elements as $element)
                {{-- "Three Dots" Separator --}}
                @if (is_string($element))
                    <li class="disabled" aria-disabled="true"><span>{{ $element }}</span></li>
                @endif

                {{-- Array Of Links --}}
                @if (is_array($element))
                    @foreach ($element as $page => $url)
                        @if ($page == $paginator->currentPage())
                            <li class="active" aria-current="page"><span>{{ $page }}</span></li>
                        @else
                            <li><a href="{{ $url }}">{{ $page }}</a></li>
                        @endif
                    @endforeach
                @endif
            @endforeach

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

Still if you want to use your own pagination view then its possible .First you need to register your custom view in Service Provider

<?php

namespace App\Providers;

use Illuminate\Pagination\Paginator;
use Illuminate\Support\Facades\Schema;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        //defaultStringLength changed to 191 to support mysql below 5.7
        Schema::defaultStringLength(191);



        Paginator::defaultView('custom-pagination');

        Paginator::defaultSimpleView('simple-pagination');

    }
}

so here in my example i have created two blade template called custom-pagination.blade.php and simple-pagination.blade.php

Ref:https://laravel.com/docs/8.x/pagination#displaying-pagination-results

Related