Livewire Pagination Laravel 9 Example Tutorial

Steps for Livewire Pagination Laravel 9 Example Tutorial:

Step 1: Installing fresh new Laravel 9 Application
Step 2: Creating Database
Step 3: Creating Dummy Records using Thinker Factory
Step 4: Installing Livewire
Step 5: Creating Component
Step 6: Creating Route
Step 7: Creating Blade View File
Step 8: Testing
Step 9: Conclusion

Also Read: Ajax File Upload with Progress Bar in Laravel 9 Example

Step 1: Installing fresh new Laravel 9 Application

First, We are going to install a fresh new laravel 9 application. To install a laravel application run the following command in terminal.

composer create-project laravel/laravel livewire-pagination-app

cd livewire-pagination-app

Note: “livewire-pagination-app” is the laravel application name.

Step 2: Creating Database

Next step is to create laravel application database. To create a database open phpmyadmin page and create a new database with livewire-pagination-app (you can use anything you like).

Creating Database - Livewire Pagination Laravel 9 Example Tutorial — **Creating Database**

Once you created the database now you have to configure it to laravel application. To configure open .env and enter the database details.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=livewire-pagination-app
DB_USERNAME=root
DB_PASSWORD=

Database Configuration - Livewire Pagination Laravel 9 Example Tutorial — **Database Configuration – Livewire Pagination Laravel 9 Example Tutorial**

Then run the migration to create tables.

php artisan migrate

After the database and migration is done! we are going to create some dummy records using thinker factory.

Also Read: Datatables Filter with Dropdown in Laravel 9 Example

Step 3: Creating Dummy Records using Thinker Factory

Now run the below command to create dummy records using thinker.

php artisan tinker
User::factory()->count(100)->create()

**Creating Dummy Records using Thinker Factory**

Step 4: Installing Livewire

Now in this step, We are going to install Livewire to our laravel 9 application. Run the following command to install Livewire.

composer require livewire/livewire

Step 5: Creating Component

Now we are going to create livewire component using the following command.

php artisan make:livewire user-pagination

Also Read: Create React JS CRUD using Vite in Laravel 9 Example

The above command will create two file in your application:

app/Http/Livewire/UserPagination.php
resources/views/livewire/user-pagination.blade.php

Now update the both files with the following code.

app/Http/Livewire/UserPagination.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Livewire\WithPagination;
use App\Models\User;

class UserPagination extends Component
{
    use WithPagination;

    public function render()
    {
        return view('livewire.user-pagination', [
            'users' => User::paginate(10),
        ]);
    }
}

resources/views/livewire/user-pagination.blade.php

<div class="shadow overflow-hidden sm:rounded-lg">
    <table class="min-w-full text-sm text-gray-900" style="width: 100%;">
        <thead class="bg-gray-200 text-xs uppercase font-medium"> 
            <tr>
                <th class="px-6 py-3 text-left tracking-wider">ID</th>
                <th scope="col" class="px-6 py-3 text-left tracking-wider">Name</th>
                <th scope="col" class="px-6 py-3 text-left tracking-wider">Email</th>
            </tr>
        </thead>
        <tbody class="bg-gray-100">
            @foreach ($users as $user)
                <tr>
                    <td class="pl-4">{{ $user->id }}</td>
                    <td class="px-6 py-4 whitespace-nowrap">{{ $user->name }}</td>
                    <td class="px-6 py-4 whitespace-nowrap">{{ $user->email }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>
  
    {{ $users->links() }}
</div>

Step 6: Creating Route

Now we are creating a once route for application. Open routes/web.php and add the following route.

<?php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| 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('/', function () {
    return view('welcome');
});

Route::get('user-pagination', function () {
    return view('default');
});

Also Read: How to Store JSON in Database Laravel 9

Step 7: Creating Blade View File

Last step is to create a blade view file to show our livewire application which will call from route. In this file we will use @livewireStyles, @livewireScripts and @livewire(‘contact-form’). so let’s add it.

Create a new file default.blade.php inside resources/views/ and add the following code.

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Livewire Pagination Example Tutorial - LaravelTuts.com</title>
    @livewireStyles
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        clifford: '#da373d',
                    }
                }
            }
        }
    </script>
    <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
</head>
<body>
    <div class="container mx-auto mt-10">
        <div class="">
            <div class="font-bold text-4xl mb-5 text-center">
                Laravel Livewire Pagination Example Tutorial - LaravelTuts.com
            </div>
            <div class="card-body">
                @livewire('user-pagination')
            </div>
        </div> 
    </div>
</body>
@livewireScripts
</html>

Step 8: Testing

Now its time to test our laravel application. Run the laravel server by following command.

php artisan serve

Now, Open the following URL in any web browser.

http://127.0.0.1:8000/user-pagination

Preview:

Step 9: Conclusion

Today, We had learn Livewire Pagination Laravel 9 Example Tutorial. Hope this tutorial helped you with learning Laravel 9. If you have any question you can ask us at comment section below. If you like the tutorial please subscribe our YouTube Channel and follow us on social network Facebook and Instagram.

Also Read: Enum Model Attribute Casting in Laravel 9 Example