How to make pagination in Laravel 10

By Ved Prakash N | Jan 25, 2024 | Laravel
Share : Whatsapp

https://www.fundaofwebit.com/post/how-to-make-pagination-in-laravel

How to make Pagination with Bootstrap and Tailwind in Laravel 10


In this post, you will learn how to use or make pagination with Bootstrap and Tailwind in Laravel

Laravel includes pagination views built using Bootstrap CSS. To use these views instead of the default Tailwind views, you may call the paginator's useBootstrapFour or useBootstrapFive methods within the boot method of your App\Providers\AppServiceProvider class:


Step 1: If you are using Bootstrap in the application, then setup paginator in AppServiceProvider class ( App/ Providers/ AppServiceProvider.php )

You can choose anyone paginator bootstrap to use: 

Note: if you are "NOT" using Bootstrap then you dont need to add this Paginator in AppServiceProvider.php beacuse by default tailwind supports it.

use Illuminate\Pagination\Paginator;

/**
 * Bootstrap any application services.
 */
public function boot(): void
{
    // Bootstrap 5
    Paginator::useBootstrapFive();

    // Bootstrap 4
    Paginator::useBootstrapFour();

    // Bootstrap 4
    Paginator::useBootstrap();
}


Step 2: Go to your Controller and setup the pagination code as shown below

Let's take an example of Customers.

public function index()
{
    $customers = Customer::paginate(5);
    return view('customer.index', compact('customers'));
}


Step 3: Open the Blade file where you have listed the customers as shown below:

<x-app-layout>

    <div class="container">

        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Phone</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($customers as $item)
                <tr>
                    <td>{{$item->id}}</td>
                    <td>{{$item->name}}</td>
                    <td>{{$item->email}}</td>
                    <td>{{$item->phone}}</td>
                </tr>
                @endforeach
            </tbody>
        </table>

        <div>
            {{ $customers->links() }}
        </div>

    </div>

</x-app-layout>

Now you will be able to see the PAGINATION with clean UI.


There are many ways to display pagination in blade files like:

For Bootstrap 4:

<div>
    {{ $customers->links('pagination::bootstrap-4') }}
</div>

Note: if you use $customers->links('pagination::bootstrap-4') this way to display pagination in your blade file. then you don't need to setup paginator in  the boot method in AppServiceProvider.php class  


For Bootstrap 5:

<div>
    {{ $customers->links('pagination::bootstrap-5') }}
</div>

Note: if you use $customers->links('pagination::bootstrap-5') this way to display pagination in your blade file. then you don't need to setup paginator in the boot method in AppServiceProvider.php class  


You can use Tailwind CSS Pagination as like here:

<div>
    {{ $customers->links() }}
</div>

Note: This is default  Tailwind CSS UI, so you don't need to setup paginator in the boot method in AppServiceProvider.php 


I hope this helps you. Thanks for reading.