Laravel 10 Pagination Example Tutorial

By Hardik Savani November 7, 2023 Category : Laravel

Hi Folks,

Are you looking for an example of laravel 10 pagination example blade. It's a simple example of laravel 10 pagination bootstrap 5 example. you can understand a concept of laravel 10 pagination tailwind example. We will look at an example of how to add pagination in laravel 10. So, let us see in detail an example.

We know pagination is a primary requirement of each and every project. so if you are a beginner with laravel then you must know how to use pagination in laravel 10 and what is another function can use with laravel 10 pagination.

In this example, we will run the migration and create a "users" table. Then we will create dummy records using the tinker command. Then we will display that users with pagination. by default laravel pagination use Tailwind CSS design, we will use bootstrap 5 design for pagination here.

Step for Laravel 10 Pagination Example

  • Step 1: Install Laravel 10
  • Step 2: Database Configuration
  • Step 3: Create Dummy Users
  • Step 4: Add Route
  • Step 5: Create Controller
  • Step 6: Create Blade File
  • Run Laravel App

So, let's follow below tutorials:

Step 1: Install Laravel 10

This is optional; however, if you have not created the laravel app, then you may go ahead and execute the below command:

composer create-project laravel/laravel example-app

Step 2: Database Configuration

In second step, we will make database configuration for example database name, username, password etc for our crud application of laravel 10. So let's open .env file and fill all details like as bellow:

.env

DB_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)

Read Also: Laravel 10 Generate PDF File using DomPDF Example

Step 3: Create Dummy Users

In this step, we need to run migration command to create users table and then create dummy users records so we can see pagination.

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

First thing is we put one route in one for list users with pagination. So simple add both routes in 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

Same things as above for route, here we will add one new method for route. index() will return users with pagination data, so let's add bellow:

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, you need to create users blade file and put bellow code with links() so it will generate pagination automatically. So let's put it.

resources/views/users.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 10 Pagination Example - ItSolutionStuff.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 - ItSolutionStuff.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>
  
    <!-- 
        You can use Tailwind CSS Pagination as like here:
        {!! $users->withQueryString()->links() !!}        
    -->
  
    {!! $users->withQueryString()->links('pagination::bootstrap-5') !!}
</div>
     
</body>
     
</html>

Run Laravel App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

php artisan serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:8000/users

Output:

If you need advance used of pagination then you can see bellow how to use.

Pagination with appends parameter

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

Pagination with appends request all parameters

Read Also: Laravel 10 Ajax CRUD Tutorial Example
{!! $data->appends(Request::all())->links() !!}

I hope it can help you....

Tags :
Previous

Laravel 10 Ajax CRUD Tutorial Example
Next

How to Create Custom Error Page in Laravel 10?

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares