Paginación usando VUEjs y LARAVEL - Parte 1

↑ Me gusta (0)

Video Bonus número 2, en el que vamos aprender paso a paso cómo realizar la paginación de varios registros de la base de datos en una lista, utilizando Laravel y Vuejs. A lo largo del curso hemos trabajado para cumplir con las funciones CRUD de nuestra aplicación, es decir, crear, leer, actualizar y eliminar, pero ahora nos interesa saber cómo crear una paginación, porque en un proyecto real no solo vamos a tener 30 registros sino muchos más.

En la vista actual la navegación entre los múltiples registros ya no sería tan cómodo ni tan rápido, entonces pensando en eso vamos aprender a realizar la paginación de los registros.

 

Modificación del Controlador

Dentro de nuestro archivo controlador app\Http\Controllers\TaskController.php, contamos con la configuración del método index() para listar todos los registros de la base de datos, es aquí donde vamos a realizar un cambio a la consulta y en sus datos a retornar.

  1. Lo primero que tenemos que hacer es cambiar el método get() por paginate() en la consulta del modelo Task y en medio de sus paréntesis le indicamos el número de registros por página que deseamos obtener.

  2. Lo siguiente que debemos modificar es el formato de elementos a retornar, ahora vamos a retornar dos listas, una que sirva para listar los registros y otra para manejar los botones de la paginación.

  3. El primer elemento a retornar será un array paginate para el control de la paginación que por medio de la variable $tasks obtenemos los valores del total de registros, página actual, registros por página, última página y primera página.

  4. El segundo array a retornar será simplemente la variable $tasks con los registros obtenidos de la consulta.

<?php
public function index(Request $request)
{
    $tasks = Task::orderBy('id', 'DESC')->paginate(2);
    return [
        'pagination' => [
            'total'               => $tasks->total(),
            'current_page' => $tasks->currentPage(),
            'per_page'       => $tasks->perPage(),
            'last_page'       => $tasks->lastPage(),
            'from'              => $tasks->firstItem(),
            'to'                   => $tasks->lastItem(),
        ],
        'tasks' => $tasks
    ];
}

 

Modificación del código Vue

Lo siguiente que demos hacer es dirigirnos al archivo con el código javascript que hemos estado utilizando resources\assets\js\app.js, en este archivo vamos a realizar las modificaciones necesarias para listar correctamente los nuevos datos conseguidos por el api.

Debemos recordar que pasar conseguir los datos enviados por el controlador, en el código Vue habíamos creado el método getkeeps() y por medio de axios lográbamos almacenar las registros obtenidos en la variable keeps.

Ahora, solo debemos cambiar la forma de asignarle los datos a esta variable de la siguiente forma: response.data.tasks.data, debido a que el controlador nos retorna dos arrays y al que vamos a necesitar acceder por el momento es el array tasks y su llave data que contienen los datos de la consulta.

<script>
getKeeps: function(page) {
    var urlKeeps = 'tasks?page='+page;
    axios.get(urlKeeps).then(response => {
        this.keeps = response.data.tasks.data
    });
}
</script>

No olvides ejecutar el comando npm run dev para realizar la compilación de laravel mix, cada que realicemos una modificación en el archivo app.js u otros archivos del webpack.

Si actualizas el navegador vas a ver como se listan solo la cantidad de registros definidos en el paginate() del controlador, si modificamos este número o cambiamos la forma de ordenamiento, Laravel va a mostrar y paginar adecuadamente según lo indicado.

En los siguientes videos vamos a continuar con la elaboración de los botones de la paginación, es decir, vamos a trabajar netamente con código javascript y el html de nuestro proyecto. Te recomiendo que no te lo pierdas, ya que esto se pondrá aún más interesante.

Italo Morales F. Italo Morales F. 3,230.00 XP

1

Tecnologías Webpack y Laravel Mix

Bienvenido a una de las series más esperadas y solicitadas en Rimorsoft, y no es para menos. La mezcla de dos grandes frameworks como lo son...

2

Controllers, Routes, Views, Database para el CRUD

En este video vamos a comenzar formalmente con la preparación del proyecto para realizar el CRUD utilizando VUE y Laravel. Se realiza la cre...

3

Conexión VUEjs y Laravel - API

En este video vamos a crear el código necesario para iniciar el API, como primer paso utilizaremos datos de ejemplo (seeder) y configuramos...

4

Lista de datos con Laravel y VUEjs

En este video veremos realmente la integración de Laravel y Vue, el objetivo será crear el diseño con su tablas, los botones, el título y la...

5

Eliminar registros con VUEjs y LARAVEL

Ha llegado la hora de adentrarnos un poco más en el funcionamiento del CRUD y en este video vamos a trabajar con la letra D, es deci...

6

Notificaciones con TOASTR - Uso de Jquery, Laravel y Vuejs

En este video vamos a culminar el proceso de eliminación de un registro, haciéndole saber al usuario que la acción se ha realizado con éxito...

7

Formulario de creación con ventana Modal - Laravel y Vuejs

Vamos a dedicarnos en el diseño para preparar la vista de nuestro formulario de creación, utilizando la tecnología de Bootstrap con una vent...

8

Guardar datos con LARAVEL y VUEjs – Método STORE

En este video vamos a continuar con el formulario de creación para añadir una nueva tarea a nuestra base de datos, utilizando Vue para h...

9

Formulario para Editar con LARAVEL y VUEjs

Vamos a preparar el terreno para la edición de un registro de nuestra lista de tareas, es decir crearemos el formulario y su respectiva vent...

10

Actualizar registros con LARAVEL y VUEjs

Tenemos que continuar con el proceso de edición de un registro y es por esto que en este video vamos a crear el bloque de código necesario p...

11

X-XSRF-TOKEN LARAVEL, VUE y AXIOS

Este video será el Bonus número 1 dentro de esta serie y en el cual vamos aprender un poco sobre seguridad y como Laravel nos ayuda en ese s...

12

Paginación usando VUEjs y LARAVEL - Parte 1

Video Bonus número 2, en el que vamos aprender paso a paso cómo realizar la paginación de varios registros de la base de datos en una lista,...

13

Paginación VUEjs y LARAVEL Computed Property - Parte 2

Video Bonus número 3, en el que vamos a continuar con la práctica de la paginación de varios registros utilizando Laravel y Vuejs, enfocándo...

14

Paginación VUEjs y LARAVEL Cálculo de páginas - Parte 3

Video Bonus número 4, vamos a continuar con la programación de la propiedad pagesNumber para obtener los números de página con cálculos...

15

Paginación VUEjs y LARAVEL Cálculo de páginas - Parte 4 (FINAL)

Video Bonus número 5, donde vamos a continuar básicamente con la creación del html o diseño de la paginación, utilizando los métodos y varia...

16

CRUD en Laravel y VUEjs - Despedida

Último video y despedida de la serie Crud en Laravel y Vuejs, corto resumen de todo lo visto a lo largo de los videos y corrección d...

Libro de Laravel Engineer Compra el libro Laravel Engineer