How to use Pagination in Laravel 11

Effortless Pagination in Laravel 11: A Complete Guide

In this article we will learn about pagination, what and how to use pagination in Laravel 11 with proper example. As we know Laravel provide many features and functionalities to deal with complex requirements efficiently. One of them is pagination. If we want to do pagination manually on both Front-End and Back-End, then its quite a headache. Laravel makes it easy to implement in no time. So let's see how it works.

What is Pagination :

Pagination is basically a process to break-down large data sets and make them into smaller and manageable data sets to work with. It helps processing small dataset in the form of multiple pages on a web page to reduce load time and efficient data interaction.

Benefits :

Performance Improvement

Reduced data loading time

Manageable and user centric data visibility

Reduce load on database

Enhanced user experience

Let's see how to implement pagination in Laravel 11 with an example. In this example we will fetch users data from data and show on our webpage via pagination. Here we will be using Bootstrap for pagination.

Create a Route :

Route::get('/users', [UserController::class, 'getUsers']);

UserController.php :

<?php

namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;

class UserController extends Controller
{
    public function getUsers(){
        $users = User::paginate(10);
        return view('users',compact('users'));
    }
}

users.blade.php :

Render your blade file to show data that are received from controller. Here i am using Bootstrap CDN for styling table and its data.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />

        <!-- Styles -->
        <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet">
      
    </head>
    <body>
        <div class="container">
          @if (!empty($users))    
          <h1 class="my-5">Laravel 11 pagination by thedevnerd</h1>
          <table class="table table-dark">
              <thead>
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">Name</th>
                  <th scope="col">Email</th>
                  <th scope="col">Created At</th>
                  <th scope="col">Updated At</th>
                </tr>
              </thead>
              <tbody>
                  @foreach ($users as $user) 
                  <tr>
                    <th scope="row">{{$user->id}}</th>
                    <td>{{$user->name}}</td>
                    <td>{{$user->email}}</td>
                    <td>{{$user->created_at}}</td>
                    <td>{{$user->updated_at}}</td>
                  </tr>
                  @endforeach
              </tbody>
            </table>
            {{ $users->links() }}
          @else
            <div class="no-users">
              <h3>No users found.</h3>
            </div>
          @endif
        </div>
    </body>
</html>

Possible Error you might face :

You might face such type of styling error. To fix this follow the next step.

How to fix the error :

To fix the error we have to initialize our bootstrap pagination on our AppServiceProvider.php file. You can also refer the Laravel 11 doc here for better understanding.

AppServiceProvider.php:

Inside boot method add these two method calls to fix this styling issue.

Paginator::useBootstrapFive()

Paginator::useBootstrapFour()

<?php

namespace App\Providers;

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

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

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

Now your pagination is ready. It will show something like this.

Advanced Implementation on Pagination :

Laravel also provide advanced customization to your pagination. If you want to change the pagination navigation design, then you can also do so. For that you have to run the following command and it will create vendor/pagination folder inside your view directory. You can now customize those files according to your need.

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

The folder directory will be similar to this.

Apart from these you can also refer the full documentation regarding Laravel pagination from the official site.

Thank you for reading this article 😊

For any query do not hesitate to comment 💬

Also Read :

How to use Laravel's append method

Best Laravel practices you should follow

Stripe - the best payment gateway. WHY?

Convert data to JSON file

Stripe coupons - delete coupons in Laravel

How to create Database from code

How to get DB size in laravel

How to use Foreach() loop in Blade file

Service Repository architecture pattern - Laravel

Effortless Pagination in Laravel 11: A Complete Guide