Laravel 12 Simple Pagination Step-by-Step Tutorial
Hey, Laravel fans! I’m excited to share a straightforward guide on adding pagination to your Laravel 12 application. Pagination is a great way to break down large datasets into manageable chunks, making your app user-friendly.
In this beginner-friendly tutorial, I’ll show you how to set up pagination to display a list of users, using Laravel’s Eloquent ORM and Bootstrap 5 for styling.
We’ll create a clean, paginated table in just a few steps.
Prerequisites
Before we dive in, make sure you have:
- A Laravel 12 project set up.
- A MySQL database configured.
- Composer installed.
Step 1: Install Laravel 12
If you already have a Laravel 12 project, skip this step. Otherwise, run:
composer create-project laravel/laravel example-app
Navigate to your project directory:
cd example-app
Step 2: Configure the Database
Laravel 12 uses SQLite by default, but we’ll set up MySQL for this example. Update your env file with your MySQL database details:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_database_name
DB_USERNAME=your_database_username
DB_PASSWORD=your_database_password
Example:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=blog
DB_USERNAME=root
DB_PASSWORD=root
Create the database in MySQL if it doesn’t exist (e.g., using phpMyAdmin or the MySQL CLI).
Step 3: Run Migrations and Create Dummy Users
We’ll use Laravel’s default users table and populate it with dummy data for pagination.
-
Run the migrations to create the
userstable:php artisan migrate -
Generate 100 dummy users using Laravel’s factory. Open the terminal and run:
php artisan tinkerIn the tinker shell, execute:
User::factory()->count(100)->create()Exit tinker with
exit.
Note: This creates 100 user records with random names, emails, and passwords, which we’ll paginate.
Step 4: Create a Route
Define a route to display the paginated users. Open routes/web.php and add:
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;
Route::get('/users', [UserController::class, 'index'])->name('users.index');
This route points to an index method in a UserController.
Step 5: Create the Controller
Create a controller to handle the pagination logic:
php artisan make:controller UserController
Open app/Http/Controllers/UserController.php and add:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
use Illuminate\View\View;
class UserController extends Controller
{
public function index(): View
{
$users = User::paginate(5);
return view('users', compact('users'));
}
}
Step 6: Create the Blade View
Create a Blade file named users.blade.php in resources/views and add:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laravel 12 Simple Pagination Example</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
</head>
<body>
<div class="container mt-5">
<div class="card">
<div class="card-header">
<h3>Laravel 12 Simple Pagination Example</h3>
</div>
<div class="card-body">
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
@forelse ($users as $user)
<tr>
<td>{{ $user->id }}</td>
<td>{{ $user->name }}</td>
<td>{{ $user->email }}</td>
</tr>
@empty
<tr>
<td colspan="3" class="text-center">No users found.</td>
</tr>
@endforelse
</tbody>
</table>
<div class="d-flex justify-content-center">
{!! $users->withQueryString()->links('pagination::bootstrap-5') !!}
</div>
</div>
</div>
</div>
</body>
</html>
Step 7: Run the Application
Start your Laravel server:
php artisan serve
You’ll see a table displaying 5 users per page, with pagination links to navigate through the 100 users.
Conclusion
Adding pagination in Laravel 12 is super simple and makes your app more user-friendly! In this tutorial, I showed you how to paginate a list of users using Laravel’s Eloquent ORM and style it with Bootstrap 5. Whether you’re displaying users, posts, or other data, pagination keeps things organized and easy to navigate. I hope this guide was clear and helps you add pagination to your Laravel projects.
Frequently Asked Questions (FAQs)
Q1: Why use pagination in Laravel?
A: Pagination splits large datasets into smaller pages, improving performance and user experience by avoiding overwhelming lists.
Q2: How do I change the number of items per page?
A: Adjust the number in User::paginate(5) to your desired value, like User::paginate(10) for 10 items per page.
Q3: Why don’t my pagination links look styled?
A: Ensure the Bootstrap 5 CDN is included in your Blade file and that you’re using links('pagination::bootstrap-5') for Bootstrap styling.
Q4: Can I paginate other models besides users?
A: Yes! Replace User::paginate(5) with any model, like Post::paginate(5), to paginate other data.
Q5: What if I want to use Tailwind CSS instead of Bootstrap?
A: Use links() without the pagination::bootstrap-5 argument and style the pagination with Tailwind classes in your Blade file.
You might also like :
- Read Also: Laravel 12 How to Generate App Key - A Simple Guide
- Read Also: Laravel 11 Datatable Server Side Pagination
- Read Also: How To Create Livewire Pagination In Laravel 10
- Read Also: How to Create Laravel 10 Vue 3 Pagination with Vite
