November 5, 2023
Category : Laravel
Laravel 10 Livewire Pagination Example Tutorial
Hi developer,
In this tutorial, I will show you an example of Laravel 10 Livewire pagination. This article will provide a detailed guide on Laravel 10 Livewire pagination. You will learn how to use pagination with Laravel 10 Livewire and troubleshoot any issues, such as when Laravel 10 Livewire pagination is not working.
Livewire is a full-stack framework that integrates with Laravel, making it easy to build dynamic interfaces without leaving the Laravel ecosystem. If you use Livewire with Laravel, you won't need to write jQuery Ajax code. Livewire simplifies the process of writing jQuery Ajax code in PHP. Additionally, you can use Laravel validation without refreshing the page, and submit forms without reloading the page.
In this example, I will show you how to create pagination for a users table and store the data in the database without refreshing the page or writing too many lines of code in the Blade file. We will use the Livewire/Livewire package to accomplish this.
Step 1: Install Laravel
first of all we need to get fresh Laravel version application using bellow command, So open your terminal OR command prompt and run bellow command:
composer create-project laravel/laravel example-app
Step 2: Create Dummy Records using Tinker Factory
you need to run following command to create dummy records in your users table. let's run both command:
php artisan tinker
User::factory()->count(100)->create()
Read Also: Laravel Livewire File Upload Tutorial
Step 3: Install Livewire
now in this step, we will simply install livewire to our laravel application using bellow command:
composer require livewire/livewire
Step 4: Create Component
Now here we will create livewire component using their command. so run bellow command to create pagination component.
php artisan make:livewire user-pagination
Now they created fies on both path:
app/Http/Livewire/UserPagination.php
resources/views/livewire/user-pagination.blade.php
Now both file we will update as bellow for our contact us form.
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;
/**
* Write code on Method
*
* @return response()
*/
public function render()
{
return view('livewire.user-pagination', [
'users' => User::paginate(10),
]);
}
}
resources/views/livewire/user-pagination.blade.php
<div>
<table class="table-auto" style="width: 100%;">
<thead>
<tr>
<th class="px-4 py-2">ID</th>
<th class="px-4 py-2">Name</th>
<th class="px-4 py-2">Email</th>
</tr>
</thead>
<tbody>
@foreach ($users as $user)
<tr>
<td class="border px-4 py-2">{{ $user->id }}</td>
<td class="border px-4 py-2">{{ $user->name }}</td>
<td class="border px-4 py-2">{{ $user->email }}</td>
</tr>
@endforeach
</tbody>
</table>
{{ $users->links() }}
</div>
Step 5: Create Route
now we will create one route for calling our example, so let's add new route to web.php file as bellow:
routes/web.php
Route::get('user-pagination', function () {
return view('default');
});
Step 6: Create View File
here, we will create blade file for call form route. in this file we will use @livewireStyles, @livewireScripts and @livewire('contact-form'). so let's add it.
resources/views/default.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel Livewire Example - ItSolutionStuff.com</title>
@livewireStyles
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.9.0/tailwind.min.css" integrity="sha512-wOgO+8E/LgrYRSPtvpNg8fY7vjzlqdsVZ34wYdGtpj/OyVdiw5ustbFnMuCb75X9YdHHsV5vY3eQq3wCE4s5+g==" crossorigin="anonymous" />
</head>
<body>
<div class="container">
<div class="card">
<div class="card-header">
Laravel Livewire Example - ItSolutionStuff.com
</div>
<div class="card-body">
@livewire('user-pagination')
</div>
</div>
</div>
</body>
@livewireScripts
</html>
Run Laravel App:
Now you can run using bellow command:
php artisan serve
Open bellow URL:
Read Also: Laravel 10 Livewire Form Submit Example
http://localhost:8000/user-pagination
Output:
I hope it can help you...
;void(0);){kind=link}
Hardik Savani
I'm a full-stack developer, entrepreneur and owner of ItSolutionstuff.com. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Laravel, Angular, Vue, Node, Javascript, JQuery, Codeigniter and Bootstrap from the early stage. I believe in Hardworking and Consistency.
Subscribe me on: Youtube
We are Recommending you
- Laravel 10 Livewire CRUD using Jetstream & Tailwind CSS
- Laravel 10 Livewire CRUD Application Example
- Laravel 10 Yajra Datatables Tutorial Example
- Laravel 10 React JS Auth Scaffolding Tutorial
- Laravel 10 Auth with Livewire Jetstream Example
- Laravel Livewire Change Event Example
- Laravel Livewire Sweetalert Example
- Laravel Livewire Notification Alert Example
- Laravel Livewire Delete Confirmation Example
- Laravel Livewire Wizard Form Example
- Laravel Livewire Add or Remove Dynamically Input Fields Example
- Laravel Livewire Load More OnScroll Example
- Laravel Livewire Image Upload Example
- Laravel Livewire File Upload Tutorial
;void(0);){kind=link}