Managing pagination is crucial when handling large datasets in modern web applications. In Laravel 11, you can effortlessly paginate data with built-in functionality. But what if you need to paginate multiple lists on the same Blade template? This tutorial will walk you through how to do exactly that using Bootstrap 5 and Tailwind CSS for styling.

In this guide, you’ll learn how to:

Implement independent pagination for multiple datasets.
Style pagination links with both Bootstrap 5 and Tailwind CSS.
Preserve the state of paginated lists when switching between pages.

Let’s dive into the details!

Why Paginate Multiple Lists?

In many applications, you might need to display more than one list of data, such as users, products, or posts, each with their own independent pagination. For example, in a dashboard or admin panel, you might have paginated lists for users, orders, and products. Laravel makes it simple to achieve this while maintaining clean URLs and easy navigation.

Setting Up Laravel 11

Before we begin, ensure that you have a Laravel 11 project set up. If you need to create a new project, run the following command:

composer create-project --prefer-dist laravel/laravel yourProjectName

Creating a Controller to Handle Multiple Paginated Lists

For this example, assume we have two models: User and Product. We’ll fetch paginated results for both in a controller and display them in a Blade template.

Start by creating a controller:

php artisan make:controller DashboardController

In the DashboardController, we’ll implement pagination for both users and products:

<?php

namespace App\Http\Controllers;

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

class DashboardController extends Controller
{
    public function index(Request $request)
    {
        // Paginate users with 10 records per page
        $users = User::orderBy('name_of_firm')->paginate(10, ['*'], 'agents');

        // Paginate products with 10 records per page
        $products = Product::orderBy('name')->paginate(10, ['*'], 'products');

        // Pass the paginated data to the view
        return view('dashboard', compact('users', 'products'));
    }
}

Here, we’ve used different pagination query strings (agents for users and products for products) to ensure that they don’t interfere with each other.

Displaying Paginated Lists in Blade

Now, let’s create a Blade file (resources/views/dashboard.blade.php) to display the paginated lists:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Tailwind CSS -->
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.3.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-4">

        <!-- Users List -->
        <h2 class="text-2xl font-bold mb-4">Users List</h2>
        <ul class="list-group mb-4">
            @foreach ($users as $user)
                <li class="list-group-item">{{ $user->name_of_firm }}</li>
            @endforeach
        </ul>
        {{ $users->appends(['products' => $products->currentPage()])->links('pagination::bootstrap-5') }}

        <!-- Products List -->
        <h2 class="text-2xl font-bold mb-4">Products List</h2>
        <ul class="list-group mb-4">
            @foreach ($products as $product)
                <li class="list-group-item">{{ $product->name }}</li>
            @endforeach
        </ul>
        {{ $products->appends(['agents' => $users->currentPage()])->links('pagination::bootstrap-5') }}

    </div>

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

In this example:

We use appends() to preserve the current page number of each list when navigating between paginated results.
Bootstrap 5 is used to style the pagination links, and you can easily swap it for Tailwind CSS.

Adding Tailwind CSS Pagination Styling

Laravel supports custom pagination views, making it easy to use Tailwind CSS for styling if needed. First, create a custom Tailwind pagination view:

mkdir -p resources/views/vendor/pagination
touch resources/views/vendor/pagination/tailwind.blade.php

In tailwind.blade.php, you can define the pagination layout using Tailwind’s utility classes:

@if ($paginator->hasPages())
    <nav role="navigation" aria-label="Pagination Navigation" class="flex justify-between">
        {{-- Previous Page Link --}}
        @if ($paginator->onFirstPage())
            <span class="disabled">«</span>
        @else
            <a href="{{ $paginator->previousPageUrl() }}" class="text-blue-500">«</a>
        @endif

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

            @if (is_array($element))
                @foreach ($element as $page => $url)
                    @if ($page == $paginator->currentPage())
                        <span class="font-bold">{{ $page }}</span>
                    @else
                        <a href="{{ $url }}" class="text-blue-500">{{ $page }}</a>
                    @endif
                @endforeach
            @endif
        @endforeach

        {{-- Next Page Link --}}
        @if ($paginator->hasMorePages())
            <a href="{{ $paginator->nextPageUrl() }}" class="text-blue-500">»</a>
        @else
            <span class="disabled">»</span>
        @endif
    </nav>
@endif

In your Blade file, switch to Tailwind pagination:

{{ $users->links('pagination::tailwind') }}

This will render the pagination links using Tailwind CSS styling.

Conclusion

Paginating multiple lists on the same Blade file in Laravel 11 can be accomplished by using independent query string parameters and customizing the pagination view for different styling needs. Whether you choose Bootstrap 5 or Tailwind CSS for styling, Laravel's pagination tools make it easy to handle large datasets with elegance and simplicity.

How to Paginate Multiple Lists on the Same Blade File in Laravel 11 with Bootstrap 5 and Tailwind CSS