Laravel 11 Simple Pagination Example

Websolutionstuff | May-03-2024 | Categories : Laravel

Hello developers! In this article, we'll see the laravel 11 simple pagination example. Here, we'll use Bootstrap 5 simple pagination in laravel 11. There are several ways to paginate items. The simplest is by using the paginate method.

The paginate method automatically takes care of setting the query's "limit" and "offset" based on the current page being viewed by the user.

Laravel's paginator is integrated with the query builder and Eloquent ORM and provides convenient, easy-to-use pagination of database records with zero configuration

Simple Pagination in Laravel 11

Laravel 11 Simple Pagination Example

 

Step 1: Install Laravel 11 Application

In this step, we'll install the laravel 11 application using the following command.

composer create-project laravel/laravel laravel-11-pagination

 

Step 2: Configure Database

Then, we'll configure the database into the .env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_demo
DB_USERNAME=root
DB_PASSWORD=

 

Step 3: Create Dummy Users

Next, we'll create a dummy record using the tinker.

php artisan tinker

User::factory()->count(100)->create()

Then, migrate the table into the database using the following command.

php artisan migrate

 

Step 4: Define a Route

Now, we'll define the route into the web.php file

routes/web.php

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\UserController;
  
Route::get('users', [UserController::class, 'index']);

 

Step 5: Create a Controller

Then, we'll create a controller and define the paginate() method.

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(10);
  
        return view('users', compact('users'));
    }
}

 

Step 6: Create Blade File

Next. add the bootstrap 5 pagination using link() function.

resources/views/users.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 11 Simple Pagination Example - techsolutionstuff.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">
    <div class="card mt-5">
        <h3 class="card-header p-3">Laravel 11 Simple Pagination Example - techsolutionstuff.com</h3>
        <div class="card-body">
            <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>
          
            <!-- You can use Tailwind CSS Pagination as like here: -->
            <!-- {!! $users->withQueryString()->links() !!} -->
          
            {!! $users->withQueryString()->links('pagination::bootstrap-5') !!}
        </div>
    </div>
</div>

</body> 
</html>

Pagination with appended parameter

{!! $data->appends(['sort' => 'votes'])->links() !!}

Pagination with appends requests all parameters

{!! $data->appends(Request::all())->links() !!}

 

Step 7: Run the Laravel 11 Application

Now, run the laravel 11 application using the following command.

php artisan serve

 


You might also like :

Recommended Post
Featured Post
How to Convert Word Docx to PDF in Laravel 11
How to Convert Word Docx to PD...

Hello, laravel web developers! In this article, we'll see how to convert Word doc to PDF in laravel 11. In laravel 1...

Read More

Jul-01-2024

How to Install and Configure Elasticsearch on Ubuntu
How to Install and Configure E...

Hey there! Today, I'm going to walk you through the process of installing and setting up Elasticsearch on your Ubunt...

Read More

Jan-08-2024

Laravel 9 Vue JS Search Example
Laravel 9 Vue JS Search Exampl...

In this article, we will see a laravel 9 vue js search example. Here, we will learn how to live search in laravel 9 usin...

Read More

Dec-14-2022

How to add Pagination in Laravel 11 Livewire
How to add Pagination in Larav...

Hello, laravel web developers! This article will show how to add pagination in laravel 11 Livewire. Here, we'll...

Read More

Jun-14-2024