Apr 02, 2024 | Laravel 10 Laravel
Hi Dev,
Are you in search of a Laravel 10 pagination example in Blade? This is a straightforward demonstration of Laravel 10 pagination utilizing Bootstrap 5. Through this illustration, you'll grasp the concept of pagination in Laravel 10, including the Tailwind CSS example. Pagination is an essential feature for nearly every project, especially for beginners in Laravel. Understanding how to implement pagination in Laravel 10 and exploring additional functions associated with it is crucial.
In this demonstration, we'll commence by executing the migration to create a "users" table. Subsequently, we'll generate dummy records using the Tinker command. Following that, we'll exhibit these users with pagination. While Laravel pagination typically employs Tailwind CSS design, we'll opt for Bootstrap 5 design for pagination in this scenario
In this particular example, our first step involves executing the migration to establish a "users" table within the database schema. Subsequently, we'll populate this table with dummy records using the Tinker command-line tool. Once the database is seeded, we'll proceed to display these user records with pagination. It's noteworthy that Laravel's default pagination styling utilizes Tailwind CSS; however, in this instance, we'll implement Bootstrap 5 for pagination design.
Step 1: Install Laravel 10This step is optional; however, if you haven't already created the Laravel application, you can proceed by executing the following command:
composer create-project laravel/laravel example-appStep 2: Database Configuration
In the second step, we'll configure the database settings such as the database name, username, password, etc. for our Laravel 10 CRUD application. To do this, let's open the .env file and input the details as shown below:
.envDB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=here your database name(blog) DB_USERNAME=here database username(root) DB_PASSWORD=here database password(root)Step 3: Create Dummy Users
In this step, we'll execute the migration command to create the "users" table and then generate dummy user records to facilitate pagination demonstration.
Let's run migration command:
php artisan migrate
Next, run ticker command to add dummy users:
php artisan tinker User::factory()->count(100)->create()Step 4: Add Route
Firstly, we need to define a route to list users with pagination. Let's add both routes to your route file.
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('users', [UserController::class, 'index']);
?>
Step 5: Create Controller
Similarly to the previous step, we'll add a new method for the route. The `index()` method will return users with pagination data. Let's proceed with the following addition:
app/Http/Controllers/UserController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
use Illuminate\View\View;
class UserController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index(Request $request): View
{
$users = User::paginate(5);
return view('users', compact('users'));
}
}
?>
Step 6: Create Blade File
In this step, we'll create a `users.blade.php` file and include the following code. Additionally, we'll use the `links()` method to automatically generate pagination links. Here's how it should be implemented:
resources/views/users.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 10 Pagination Example - ItErrorSolution.com</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Laravel 10 Pagination Example - ItErrorSolution.com</h1>
<table class="table table-bordered data-table">
<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">There are no users.</td>
</tr>
@endforelse
</tbody>
</table>
{!! $users->withQueryString()->links('pagination::bootstrap-5') !!}
</div>
</body>
</html>
Run Laravel App:
Now, to run the Laravel application, please type the following command and press enter:
php artisan serve
Now, open your web browser and enter the provided URL to view the output of the application.
http://localhost:8000/users
"Hey there! I'm a full-stack developer and proud owner of ItErrorSolution.com, based right here in India. I love nothing more than sharing handy tips and tricks with my fellow developers through easy-to-follow tutorials. When it comes to coding, I'm all about PHP, Laravel, Angular, Vue, Node, JavaScript, jQuery, CodeIgniter, and Bootstrap – been hooked on them forever! I'm all about putting in the work and staying committed. Ready to join me on this journey to coding?"