How to Implement Bootstrap Pagination in Laravel 11

How to Implement Bootstrap Pagination in Laravel 11

You are currently viewing How to Implement Bootstrap Pagination in Laravel 11

Pagination is essential for handling large datasets efficiently in web applications. In this tutorial, you’ll learn how to integrate Bootstrap pagination in Laravel 11 using two methods:

  1. Specifying Bootstrap pagination in the view.
  2. Using Paginator::useBootstrap() globally in the AppServiceProvider.

Prerequisites

Laravel 11 installed:

composer create-project laravel/laravel laravel11-bootstrap-pagination

Bootstrap 5 integrated via CDN or npm:

npm install bootstrap

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

Step 1: Set Up a Laravel Project with Sample Data

1.1 Create a Model and Migration

Generate a model and migration for a Post entity: 

php artisan make:model Post -m

Define the table schema in database/migrations/xxxx_xx_xx_create_posts_table.php: 

Schema::create('posts', function (Blueprint $table) {
    $table->id();
    $table->string('title');
    $table->text('content');
    $table->timestamps();
});

Run the migration: 

php artisan migrate

Seed the database with dummy data: 

php artisan tinker Post::factory()->count(50)->create();

    Step 2: Set Up the Controller

    Generate a controller: php artisan make:controller PostController

    Fetch paginated data in app/Http/Controllers/PostController.php:

    namespace App\Http\Controllers;

use App\Models\Post;

class PostController extends Controller
{
    public function index()
    {
        $posts = Post::paginate(10); // Display 10 posts per page
        return view('posts.index', compact('posts'));
    }
}

      Step 3: Method 1 – Specify Bootstrap Pagination in the View

      Create the Blade template in resources/views/posts/index.blade.php: 

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel Pagination</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <h1>Posts</h1>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Title</th>
                    <th>Content</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($posts as $post)
                    <tr>
                        <td>{{ $post->id }}</td>
                        <td>{{ $post->title }}</td>
                        <td>{{ $post->content }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>

        <!-- Pagination Links with Bootstrap 5 styling -->
        <div class="d-flex justify-content-center">
            {{ $posts->links('pagination::bootstrap-5') }}
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

        Explanation:

        • {{ $posts->links('pagination::bootstrap-5') }}: This applies Bootstrap 5 styling to the pagination links in this specific view.

        Read More

        How to Check Your Localhost Laravel App on Another Device

        Step 4: Method 2 – Use Paginator::useBootstrap() Globally

        Modify AppServiceProvider in app/Providers/AppServiceProvider.php:

        namespace App\Providers;

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

class AppServiceProvider extends ServiceProvider
{
    public function register()
    {
        //
    }

    public function boot()
    {
        // Use Bootstrap for pagination globally
        Paginator::useBootstrap();
    }
}

        Update the view to use the default pagination links: 

        <div class="d-flex justify-content-center"> {{ $posts->links() }} </div>

          Explanation:

          • By adding Paginator::useBootstrap() in the AppServiceProvider, you apply Bootstrap pagination globally. This eliminates the need to specify 'pagination::bootstrap-5' in each view.

          Step 5: Define Routes

          Add the route in routes/web.php: 

          use App\Http\Controllers\PostController; 
Route::get('/posts', [PostController::class, 'index'])->name('posts.index');

            Step 6: Test the Application

            1. Run the server: php artisan serve
            2. Visithttp://127.0.0.1:8000/posts in your browser. Depending on your chosen method:
              • Method 1: Pagination links are styled using pagination::bootstrap-5 in the view.
              • Method 2: Bootstrap pagination styling is applied globally.

            Conclusion

            You have successfully integrated Bootstrap pagination in Laravel 11 using two approaches:

            1. Specifying the Bootstrap pagination view in individual templates.
            2. Applying Bootstrap pagination globally using Paginator::useBootstrap().

            Both methods offer flexibility depending on your project requirements. For more Laravel tutorials, visit Codimate Solutions Tutorials.

            Tags: , , , , , , , , , , ,

            Leave a Reply