How to use Tailwind css Pagination in Livewire Laravel 9 ?
Jul 11, 2022 . Admin
Hello Dev,
This tutorial shows you laravel 9 livewire pagination using tailwind css. This post will give you simple example of laravel 9 livewire pagination tailwind example. I explained simply about tailwind css laravel 9 livewire pagination tutorial. you can understand a concept of tailwind css laravel 9 livewire pagination.
Here, I will show you a full example of creating tailwind pagination in laravel livewire so follow my below steps.
Step 1 : Create User using TinkerFirst of all, run the following command to generate fake data using faker as follow:
php artisan tinker //and then User::factory()->count(20)->create() exitStep 2 : Install Livewire Package
So, We will install livewire Package via the composer dependency manager. Use the following command to install livewire Package.
composer require livewire/livewireStep 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
We are here 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 9 Livewire Pagination using Tailwind css Example - MyWebtuts.com</h2> </div> <div class="card-body"> @livewire('search-pagination') </div> </div> </div> </div> </div> @livewireScripts </body> </html>Step 6 : Create Tailwind Pagination Template
In 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.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 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.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 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.293 14.707a1 1 0 010-1.414L10.586 10 7.293 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.293 14.707a1 1 0 010-1.414L10.586 10 7.293 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-paginationOutput

It will help you...