Posted on by MariaJose

Paginación: ejemplo con Laravel Livewire

paginación

Laravel Livewire: Ejemplo de paginación

Esta publicación se centra en el ejemplo de paginación de Laravel Livewire. es un ejemplo simple del tutorial de paginación Livewire de Laravel 8. Les voy a mostrar acerca de la paginación con Laravel Livewire. En este artículo, implementaremos una paginación Livewire de Laravel que no funciona.

En este tutorial, crearemos un ejemplo de paginación simple usando laravel livewire. puede usar la paginación livewire de laravel con las versiones de laravel 6, laravel 7 y laravel 8.

Livewire es un marco de pila completo para el marco de Laravel que simplifica la construcción de interfaces dinámicas, sin dejar la comodidad de Laravel. Si estás usando livewire con laravel, entonces no te preocupes por escribir código jquery ajax, livewire te ayudará a escribir código jquery ajax de forma muy simple usando PHP. sin actualización de página, la validación de laravel funcionará, el formulario se enviará, etc.

Aquí, le daré un ejemplo muy simple de creación de paginación con una tabla de usuario y almacenaré esos datos en la base de datos sin actualizar la página y demasiadas líneas de código en el archivo blade. Usaremos solo el paquete livewire / livewire

Paso 1: Instalar Laravel 8

En primer lugar, necesitamos obtener una nueva aplicación de la versión Laravel 8 usando el siguiente comando, así que abra su terminal O el símbolo del sistema y ejecute el siguiente comando:

composer create-project --prefer-dist laravel/laravel blog

Paso 2: Cree registros ficticios usando Tinker Factory

Debe ejecutar el siguiente comando para crear registros ficticios en la tabla de su usuario. ejecutemos ambos comandos:

php artisan tinker

User::factory()->count(100)->create()

Paso 3: Instale Livewire

Ahora en este paso, simplemente instalaremos livewire en nuestra aplicación laravel 8 usando el siguiente comando:

composer require livewire/livewire

Paso 4: Crear componente

Ahora aquí crearemos un componente Livewire usando su comando. así que ejecute el siguiente comando para crear un componente de paginación.

php artisan make:livewire user-pagination

Ahora crearon archivos en ambas rutas:

app/Http/Livewire/UserPagination.php

resources/views/livewire/user-pagination.blade.php

Ahora actualizaremos ambos archivos como se muestra a continuación para nuestro formulario de contacto.

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>

Paso 5: crear ruta

Ahora crearemos una ruta para llamar a nuestro ejemplo, así que agreguemos una nueva ruta al archivo web.php como se muestra a continuación:

routes/web.php

Route::get('user-pagination', function () {

return view('default');

});

Paso 6: Crear archivo de vista

Aquí crearemos un archivo blade para la ruta del formulario de llamada. en este archivo, usaremos @livewireStyles, @livewireScripts y @livewire (“formulario de contacto”). así que añádalo.

resources/views/default.blade.php

<!DOCTYPE html>

<html>

<head>

<title>Laravel Livewire Example - raviyatechnical</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 - raviyatechnical

</div>

<div class="card-body">

@livewire('user-pagination')

</div>

</div>

</div>

</body>

@livewireScripts

</html>

Ahora puede ejecutar usando el siguiente comando:

php artisan serve

Abrir debajo de la URL:

http://localhost:8000/user-pagination

Recent Post