08-May-2023
.
Admin
Hi dev,
The most important instances of laravel 10 livewire pagination utilising tailwind css are provided in this article. I'd want to provide you an example of laravel 10 livewire pagination with tailwind. I'd like to demonstrate tailwind css pagination for laravel 10. Using a tailwind example, you will learn laravel 10 livewire pagination.
In this tutorial, I will explain how to create tailwind CSS laravel 10 livewire pagination.we will learn laravel 10 livewire pagination using tailwind example.
So, you can use this tutorial code and you can implement your laravel project.
Here, I will show you a full example of creating tailwind pagination in laravel livewire so follow my below steps.
Step 1 : Create User
First of all, run the following command to generate fake data using faker as follow:
php artisan tinker
//and then
User::factory()->count(20)->create()
exit
Step 2 : Install Livewire Package
In this second step, we will install livewire Package via the composer dependency manager. Use the following command to install livewire Package.
composer require livewire/livewire
Step 3 : Create Component using Artisan
In this step we will create a component using following command:
php artisan make:livewire search-pagination
Next, creating a component using artisan command.
app/Http/Livewire/SearchPagination.php
resources/views/livewire/search-pagination.blade.php
Now, go to app/Http/Livewire folder and open SearchPagination.php file. Then put the following code into your SearchPagination.php file:
app/Http/Livewire/SearchPagination.php
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use Livewire\WithPagination;
use App\Models\User;
class SearchPagination extends Component
{
use WithPagination;
public $searchTerm;
public function render()
{
return view('livewire.search-pagination',[
'users' => User::paginate(5)
]);
}
}
So, go to resources/views/livewire folder and open search-pagination.blade.php file. Then put the following code into your search-pagination.blade.php file:
resources/views/livewire/search-pagination.blade.php
<div class="container">
<div class="row">
<div class="col-md-12">
<table class="table table-bordered">
<tr>
<th>Name</th>
<th>Email</th>
</tr>
@foreach($users as $user)
<tr>
<td>
{{ $user->name }}
</td>
<td>
{{ $user->email }}
</td>
</tr>
@endforeach
</table>
{{ $users->links('pagination::tailwind') }}
</div>
</div>
</div>
Step 4 : Add Route
We put one route in one for list users with pagination. So simply add both routes to your route file.
/routes/web.php
<?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('/search-with-pagination', function () {
return view('livewire.home');
});
Step 5 : Create View File
In this step, go to resources/views/livewire folder and create a blade file that name home.blade.php file. Then put the following code into your home.blade.php file:
resources/views/livewire/home.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel Livewire Search with Pagination</title>
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css">
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<style type="text/css">
.duration-150{
padding: 6px 12px !important;
text-decoration: none !important;
}
.duration-150:hover{
text-decoration: none !important;
}
</style>
</head>
<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header bg-primary">
<h2 class="text-white">Laravel 10 Livewire Pagination using Tailwind css Example - Nicesnippets.com</h2>
</div>
<div class="card-body">
@livewire('search-pagination')
</div>
</div>
</div>
</div>
</div>
@livewireScripts
</body>
</html>
Step 6 : Create Tailwind Pagination Template
this step we are going to use laravel custom pagination template, that's why run below command to have it.
php artisan vendor:publish --tag=laravel-pagination
Include Tailwind CSS Style using CDN inside the head tag.
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
This command will place the views in your application's resources/views/vendor/pagination directory. The tailwind.blade.php file within this directory corresponds to the default pagination view. You may edit this file to modify the pagination HTML.
resources/views/vendor/pagination/tailwind.blade.php
@if ($paginator->hasPages())
<nav role="Page navigation" aria-label="{{ __('Pagination Navigation') }}" class="flex items-center justify-between">
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
<div>
<p class="text-sm text-gray-700 leading-5">
{!! __('Showing') !!}
<span class="font-medium">{{ $paginator->firstItem() }}</span>
{!! __('to') !!}
<span class="font-medium">{{ $paginator->lastItem() }}</span>
{!! __('of') !!}
<span class="font-medium">{{ $paginator->total() }}</span>
{!! __('results') !!}
</p>
</div>
<div>
<span class="relative z-0 inline-flex shadow-sm rounded-md">
{{-- Previous Page Link --}}
@if ($paginator->onFirstPage())
<button class="flex items-center justify-center w-10 h-10 text-green-600 transition-colors duration-150 rounded-full focus:shadow-outline hover:bg-green-100">
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M12.707 5.2103a1 1 0 010 1.414L10.414 10l3.2103 3.2103a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" fill-rule="evenodd"></path></svg>
</button>
@else
<a href="{{ $paginator->previousPageUrl() }}" rel="prev" class="flex items-center justify-center w-10 h-10 text-green-600 transition-colors duration-150 rounded-full focus:shadow-outline hover:bg-green-100" aria-label="{{ __('pagination.previous') }}">
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M12.707 5.2103a1 1 0 010 1.414L10.414 10l3.2103 3.2103a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" fill-rule="evenodd"></path></svg>
</a>
@endif
{{-- Pagination Elements --}}
@foreach ($elements as $element)
{{-- "Three Dots" Separator --}}
@if (is_string($element))
<span aria-disabled="true">
<span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 cursor-default leading-5">{{ $element }}</span>
</span>
@endif
{{-- Array Of Links --}}
@if (is_array($element))
@foreach ($element as $page => $url)
@if ($page == $paginator->currentPage())
<span aria-current="page">
<button class="w-10 h-10 text-white transition-colors duration-150 bg-green-600 border border-r-0 border-green-600 rounded-full focus:shadow-outline">{{ $page }}</button>
</span>
@else
<a href="{{ $url }}" class="w-10 h-10 text-green-600 transition-colors duration-150 rounded-full focus:shadow-outline hover:bg-green-100" aria-label="{{ __('Go to page :page', ['page' => $page]) }}">
{{ $page }}
</a>
@endif
@endforeach
@endif
@endforeach
{{-- Next Page Link --}}
@if ($paginator->hasMorePages())
<a href="{{ $paginator->nextPageUrl() }}" rel="next" class="flex items-center justify-center w-10 h-10 text-green-600 transition-colors duration-150 rounded-full focus:shadow-outline hover:bg-green-100" aria-label="{{ __('pagination.previous') }}">
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M7.2103 14.707a1 1 0 010-1.414L10.586 10 7.2103 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" fill-rule="evenodd"></path></svg>
</a>
@else
<button class="flex items-center justify-center w-10 h-10 text-green-600 transition-colors duration-150 bg-white rounded-full focus:shadow-outline hover:bg-green-100">
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M7.2103 14.707a1 1 0 010-1.414L10.586 10 7.2103 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" fill-rule="evenodd"></path></svg>
</button>
@endif
</span>
</div>
</div>
</nav>
@endif
Now we are ready to run our example so run bellow command for quick run:
php artisan serve
Now you can open bellow URL on your browser:
http://localhost:8000/search-with-pagination
Output
It will help you...
#Laravel 10