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

↑ Me gusta (0)

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 variables programadas en Laravel y Vuejs. Hemos llegado a la parte relativamente más sencilla en la elaboración de nuestra paginación, ya que nos encargaremos de realizar su diseño utilizando las etiquetas html, las funciones ya programadas en el código javascript y las directivas de Vue.

 

Diseño de la paginación

Para configurar la vista de la paginación nos dirigimos al archivo resources\views\dashboard.blade.php y nos ubicamos justo después del html de la tabla con la que presentamos los registros. La paginación tiene que quedar algo así como al pie de esta tabla y para la elaboración de su diseño realizamos los siguientes pasos:

  1. Primero que nada debemos crear la estructura de nuestra paginación ayudándonos de una etiqueta de navegación <nav>, luego elaboramos una lista html <ul> con su respectiva clase bootstrap pagination y que contará con 3 elementos <li> cada uno con su respectivo enlace <a>.

  2. En el primer elemento <li> vamos a utilizar la directiva v-if para de esta manera controlar que el botón o enlace “atras” se muestre únicamente cuando la página actual sea mayor a uno.

  3. En el enlace configuramos la acción del botón “atras”, utilizando el método changePage() al cual le enviamos como parámetro la página actual menos una posición.

  4. En el segundo elemento <li> es donde vamos a generar la numeración de nuesta paginación, con la directiva v-for nos conectamos a la propiedad pagesNumber creada en el código Vue e iteramos por cada página que exista, creando así la numeración correspondiente. A su vez con la directiva v-bind establecemos la propiedad de colocar la clase active para cambiar el color del elemento o página en la que el usuario se encuentra visualizando.

  5. En su enlace utilizamos el método changePage() en la cual enviamos como parámetro el número de la página a la que el usuario desea cambiar o moverse y por medio de la variable @{{ page }} simplemente mostramos el número de la página que estamos iterando con la directiva v-for del elemento <li>.

  6. En el tercer y último elemento <li> tenemos utilizar de nuevo la directiva v-if para controlar que si la página actual es menor a la última página, el botón o enlace “siguiente” desaparezca, ya que no constamos con más páginas que avanzar.

  7. En su enlace una vez más utilizamos el método changePage() de Vue y en este caso como parámetro le enviamos la suma de la página actual más una posición, esto causará el efecto de ir avanzando a la siguiente página.

<nav>
    <ul class="pagination">
        <li v-if="pagination.current_page > 1">
            <a href="#" @click.prevent="changePage(pagination.current_page - 1)">
                <span>Atras</span>
	</a>
        </li>
        <li v-for="page in pagesNumber" v-bind:class="[ page == isActived ? 'active' : '']">
            <a href="#" @click.prevent="changePage(page)">
                @{{ page }}
            </a>
        </li>
        <li v-if="pagination.current_page < pagination.last_page">
            <a href="#" @click.prevent="changePage(pagination.current_page + 1)">
                <span>Siguiente</span>
            </a>
        </li>
    </ul>
</nav>

Todo esto sería una mezcla entre el diseño y el código Vue para lograr crear nuestra paginación, que simplemente con la acción del clic en un enlace llamamos a las funciones programadas del código javascript y causar el dinamismo de lograr movernos entre las diferentes páginas con sus respectivos registros.

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