Livewire Pagination Laravel 9 Example Tutorial

Today, We are going to learn Livewire Pagination Laravel 9 Example Tutorial. This tutorial will cover on how to paginated with livewire in laravel 9 application.

Livewire is a full-stack framework for Laravel that makes building dynamic interfaces simple, without leaving the comfort of Laravel.

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 8211 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
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:

Livewire Pagination Laravel 9 Example Tutorial
Livewire Pagination Laravel 9 Example Tutorial

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

3 Comments

Leave a Reply