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-appNote: “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).
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=
Then run the migration to create tables.
php artisan migrateAfter 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()
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/livewireStep 5: Creating Component
Now we are going to create livewire component using the following command.
php artisan make:livewire user-paginationAlso 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 serveNow, Open the following URL in any web browser.
http://127.0.0.1:8000/user-paginationPreview:
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 thoughts on “Livewire Pagination Laravel 9 Example Tutorial”