How to make pagination in Laravel

Pagination in Laravel

How to make Pagination in Laravel with Bootstrap and Tailwind

Laravel pagination with Bootstrap and Tailwind in

In this article, we will learn how to make or use pagination in laravel with Bootstrap and Tailwind

Laravel default paginator view use Tailwind. But also includes pagination views built with using Bootstrap CSS. To use these views instead of the default Tailwind views, you may call the paginator’s use BootstrapFive or  useBootstrapFour methods within the boot method of your App\Providers\AppServiceProvider class:  If you are using Bootstrap in the application, then

Step 1: 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 Users.

public function index()
{
    $users = Users::paginate(20);
    return view('users.index', compact('users'));
}

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

 <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 ($users as $item)
                <tr>
                    <td>{{$item->id}}</td>
                    <td>{{$item->name}}</td>
                    <td>{{$item->email}}</td>
                    <td>{{$item->phone}}</td>
                </tr>
                @endforeach
            </tbody>
        </table>

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

    </div>

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>
    {{ $users->links('pagination::bootstrap-4') }}
</div>

Note: if you use $users->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>
    {{ $users->links('pagination::bootstrap-5') }}
</div>

Note: if you use $users->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>
    {{ $users->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.