miércoles 31 julio 2024

Cómo paginar en Laravel

Requisitos Previos
Creación de un Modelo y Migración
Insertar Datos de Prueba
Implementar la Paginación en el Controlador
Crear la Vista
Ruta para el Controlador
Personalizar la Paginación
Conclusión

Requisitos Previos

Antes de comenzar, asegúrate de tener los siguientes elementos configurados:

1. Un proyecto Laravel: Si no tienes uno, puedes crear uno nuevo con el siguiente comando:

composer create-project --prefer-dist laravel/laravel nombre-proyecto

2. Base de datos configurada: Asegúrate de tener una base de datos configurada en tu archivo .env.

Creación de un Modelo y Migración

Para este ejemplo, asumiremos que estamos trabajando con un modelo Post. Si aún no tienes un modelo Post, puedes crear uno junto con su migración:

php artisan make:model Post -m

En el archivo de migración generado (database/migrations/xxxx_xx_xx_create_posts_table.php), define la estructura de la tabla posts:

public function up()
{
    Schema::create('posts', function (Blueprint $table) {
        $table->id();
        $table->string('title');
        $table->text('content');
        $table->timestamps();
    });
}

Ejecuta la migración para crear la tabla en la base de datos:

php artisan migrate

Insertar Datos de Prueba

Para ver la paginación en acción, insertemos algunos datos de prueba. Puedes usar un seeder para esto. Crea un seeder:

php artisan make:seeder PostsTableSeeder

En el seeder (database/seeders/PostsTableSeeder.php), inserta datos de prueba:

use Illuminate\Database\Seeder;
use App\Models\Post;

class PostsTableSeeder extends Seeder
{
    public function run()
    {
        \App\Models\Post::factory()->count(50)->create();
    }
}

No olvides crear una fábrica para el modelo Post (database/factories/PostFactory.php):

use Faker\Generator as Faker;

$factory->define(App\Models\Post::class, function (Faker $faker) {
    return [
        'title' => $faker->sentence,
        'content' => $faker->paragraph,
    ];
});

Luego, corre el seeder:

php artisan db:seed --class=PostsTableSeeder

Implementar la Paginación en el Controlador

Vamos a configurar la paginación en nuestro controlador. Si aún no tienes un controlador, crea uno:

php artisan make:controller PostController

En el controlador (app/Http/Controllers/PostController.php), implementa la paginación:

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Post;

class PostController extends Controller
{
    public function index()
    {
        $posts = Post::paginate(10); // Paginar 10 posts por página
        return view('posts.index', compact('posts'));
    }
}

Crear la Vista

Crea una vista para mostrar los posts paginados. En resources/views/posts/index.blade.php:

<!DOCTYPE html>
<html>
<head>
    <title>Paginar en Laravel</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.1/tailwind.min.css">
</head>
<body>
    <div class="container mx-auto mt-5">
        <h1 class="text-2xl font-bold mb-5">Lista de Posts</h1>
        <div class="bg-white shadow overflow-hidden sm:rounded-lg">
            @foreach ($posts as $post)
                <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
                    <h2 class="text-lg font-medium leading-6 text-gray-900">{{ $post->title }}</h2>
                    <p class="mt-1 max-w-2xl text-sm text-gray-500">{{ $post->content }}</p>
                </div>
            @endforeach
        </div>
        <div class="mt-5">
            {{ $posts->links() }} <!-- Mostrar enlaces de paginación -->
        </div>
    </div>
</body>
</html>

Ruta para el Controlador

Define la ruta para el controlador en routes/web.php:

use App\Http\Controllers\PostController;

Route::get('/posts', [PostController::class, 'index']);

Personalizar la Paginación

Laravel proporciona un método links() que genera automáticamente los enlaces de paginación. Este método puede ser personalizado pasando el nombre de la vista del paginador que deseas utilizar. Laravel incluye varias vistas predeterminadas para paginación:

{{ $posts->links('pagination::bootstrap-4') }} <!-- Utiliza el diseño de Bootstrap 4 -->

O puedes crear tu propia vista personalizada para los enlaces de paginación.

Conclusión

Laravel hace que la paginación sea increíblemente sencilla. Con solo unos pocos pasos, puedes implementar una paginación completa y personalizable en tu aplicación web. Esto no solo mejora la experiencia del usuario, sino que también optimiza el rendimiento al cargar grandes conjuntos de datos de manera más eficiente.

Etiquetas:

laravel php desarrollo web

Creado por:

Jorge García

Fullstack developer