Se utiliza la paginación para poder mostrar al usuario una gran cantidad de datos de una forma ordenada en forma de «paginas» de tal forma que, uno, no se abrume al usuario con mucha información en pantalla y dos, no saturar los recursos de procesamiento al manipular muchos datos de los que probablemente no usemos ni el uno por ciento.
Laravel ya nos ofrece metodos para implementar esta paginación de una forma muy sencilla y rápida.
A continuación una guía paso a paso sobre cómo usar la paginación en Laravel.
¿Qué necesitamos?
Paso 1. Creamos la estructura de nuestro proyecto
Paso 2. Tabla Student
Definimos las instrucciones necesarias para la creación de la tabla STUDENTS. en nuestro archivo de migración
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('students', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('email');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('students');
}
};
Paso 3. El modelo (Student.php)
Solo debemos crear el archivo Student.php , no es necesario realizar ningun cambio.
Paso 4. Fabrica de datos (StudentFactory.php)
Nos ayudamos de los factories (Fabricas) de Laravel para llenar datos en nuestra tabla
<?php
namespace Database\Factories;
use Illuminate\Database\Eloquent\Factories\Factory;
/**
* @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\Student>
*/
class StudentFactory extends Factory
{
/**
* Define the model's default state.
*
* @return array<string, mixed>
*/
public function definition(): array
{
return [
'name' => $this->faker->name(),
'email' => $this->faker->email()
];
}
}
Y modificamos el archivo DatabaseSeeder.php para incluir nuestro factory de la siguiente forma:
<?php
namespace Database\Seeders;
use Illuminate\Database\Seeder;
use App\Models\Student;
class DatabaseSeeder extends Seeder
{
public function run(): void
{
Student::factory()
->count(10000)
->create();
}
}
Finalmente ejecutamos el comando:
php artisan migrate:refresh --seed
Paso 5. El controlador (StudentController.php)
Desde la función index() cargamos la lista de estudiantes con el comando paginate(10) y retornamos la vista junto con nuestra lista de estudiantes.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Student;
class StudentController extends Controller
{
/**
* Display a listing of the resource.
*/
public function index()
{
$students = Student::paginate(10);
return view('students.index', compact('students'));
}
Paso 6. La vista (index.blade.php)
En el archivo index se implementa la tabla para mostrar los resultados de la paginación, nos ayudamos de Bootstrap para los estilos css.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Laravel Pagination - JC Mouse</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h3 class="text-center">Xavier's School for Gifted Youngsters</h3>
<div class="row justify-content-md-center">
<div class="col col-lg-6">
<table class="table table-bordered table-striped">
<thead>
<tr class="thead-dark">
<th scope="col">#</th>
<th scope="col">Student Name</th>
<th scope="col">Email</th>
</tr>
</thead>
<tbody>
@foreach($students as $student)
<tr>
<th scope="row">{{ $student->id }}</th>
<td>{{ $student->name }}</td>
<td>{{ $student->email }}</td>
</tr>
@endforeach
</tbody>
</table>
<div>
{!! $students->links('pagination::bootstrap-4') !!}
</div>
</div>
</div>
</div>
</body>
</html>
Paso 7. La ruta (web.php)
Para concluir debemos declarar la ruta para acceder a nuestro recurso. Modificamos nuestro archivo web.php para incluir la ruta students.
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\StudentController;
Route::get('/students', [StudentController::class, 'index']);
Desde el navegador probamos el proyecto y tenemos:
enjoy!!!
Cuando se inicia el aprendizaje de un lenguaje de programación, nunca debe faltar el clásico «Hola Mundo» 🙂 en Android n[...]
Cuando se crean aplicaciones android o cualquier otro tipo de software, es importante dejar información del o los desarr[...]
Los códigos QR del inglés Quick Response Code o código de respuesta rápida es un tipo de código para el almacenamiento d[...]
En este tutorial crearemos una aplicación android que nos permitirá abrir un PopupMenu de donde podremos seleccionar una[...]
Cuando programamos visualmente desde Netbeans, el IDE nos ayuda mucho al generar rapidamente código predefinido, sin emb[...]
En este videotutorial se vera la creación de Interfaces Gráficas de Usuario (GUI) utilizando MatLab GUIDE herramienta vi[...]
