Cómo implementar la paginación en una aplicación Vue

La paginación le permite dividir grandes conjuntos de datos en fragmentos más pequeños y manejables. La paginación facilita a los usuarios navegar por grandes conjuntos de datos y encontrar la información que buscan.

Comenzando con Vue-Awesome-Paginate

Vue-awesome-paginate es una biblioteca de paginación de Vue potente y liviana que simplifica el proceso de creación de visualizaciones de datos paginados. Proporciona funciones integrales, incluidos componentes personalizables, API fáciles de usar y soporte para varios escenarios de paginación.

Para comenzar a usar vue-awesome-paginate, instale el paquete ejecutando este comando de terminal en el directorio de su proyecto:

npm install vue-awesome-paginate

Luego, para configurar el paquete para que funcione en su aplicación Vue, copie el siguiente código en el archivo src/main.js :

import { createApp } from "vue";import App from "./App.vue";import VueAwesomePaginate from "vue-awesome-paginate";import "vue-awesome-paginate/dist/style.css";createApp(App).use(VueAwesomePaginate).mount("#app");

Este código importa y registra el paquete con el método .use() , para que pueda usarlo en cualquier parte de su aplicación. El paquete de paginación viene con un archivo CSS, que el bloque de código también importa.

Creación de la aplicación Test Vue

Para ilustrar cómo funciona el paquete vue-awesome-paginate, creará una aplicación Vue que muestre un conjunto de datos de muestra. Obtendrá datos de una API con Axios para esta aplicación.

Copie el bloque de código a continuación en su archivo App.vue :

<script setup>import { ref, onBeforeMount } from "vue";import axios from "axios";const comments = ref([]);const loadComments = async () => { try { const response = await axios.get( `https://jsonplaceholder.typicode.com/comments`, ); return response.data.map((comment) => comment.body); } catch (error) { console.error(error); }};onBeforeMount(async () => { const loadedComments = await loadComments(); comments.value.push(...loadedComments); console.log(comments.value);});</script><template> <div> <h1>Vue 3 Pagination with JSONPlaceholder</h1> <div v-if="comments.length"> <div v-for="comment in comments" class="comment"> <p>{{ comment }}</p> </div> </div> <div v-else> <p>Loading comments...</p> </div> </div></template>

Este bloque de código utiliza la API de composición de Vue para crear un componente. El componente utiliza Axios para recuperar comentarios de la API JSONPlaceholder antes de que Vue lo monte ( enganche onBeforeMount ). Luego almacena los comentarios en la matriz de comentarios , usando la plantilla para mostrarlos o un mensaje de carga hasta que los comentarios estén disponibles.

Integrando Vue-Awesome-Paginate en su aplicación Vue

Ahora que tiene una aplicación Vue simple que obtiene datos de una API, puede modificarla para integrar el paquete vue-awesome-paginate. Utilizará esta función de paginación para dividir los comentarios en diferentes páginas.

Reemplace la sección de secuencia de comandos de su archivo App.vue con este código:

<script setup>import { ref, computed, onBeforeMount } from 'vue';import axios from 'axios';const perPage = ref(10);const currentPage = ref(1);const comments = ref([]);const onClickHandler = (page) => { console.log(page);};const loadComments = async () => { try { const response = await axios.get( `https://jsonplaceholder.typicode.com/comments` ); return response.data.map(comment => comment.body); } catch (error) { console.error(error); }};onBeforeMount(async () => { const loadedComments = await loadComments(); comments.value.push(...loadedComments); console.log(comments.value);});const displayedComments = computed(() => { const startIndex = (currentPage.value * perPage.value) - perPage.value; const endIndex = startIndex + perPage.value; return comments.value.slice(startIndex, endIndex);});</script>

Este bloque de código agrega dos referencias reactivas más: perPage y currentPage . Estas referencias almacenan la cantidad de elementos que se mostrarán por página y el número de página actual, respectivamente.

El código también crea una referencia calculada denominada displayComments . Esto calcula el rango de comentarios en función de los valores de página actual y por página . Devuelve una porción de la matriz de comentarios dentro de ese rango, que agrupará los comentarios en diferentes páginas.

Ahora, reemplace la sección de plantilla de su archivo App.vue con lo siguiente:

<template> <div> <h1>Vue 3 Pagination with JSONPlaceholder</h1> <div v-if="comments.length"> <div v-for="comment in displayedComments" class="comment"> <p>{{ comment }}</p> </div> <vue-awesome-paginate : total-items="comments.length" : items-per-page="perPage" : max-pages-shown="5" v-model="currentPage" : onclick="onClickHandler" /> </div> <div v-else> <p>Loading comments...</p> </div> </div></template>

El atributo v-for para representar listas en esta sección de plantilla apunta a la matriz de comentarios mostrados. La plantilla agrega el componente vue-awesome-paginate, al que el fragmento de arriba le pasa accesorios.

Después de diseñar su aplicación, debería obtener una página similar a esta:

Haga clic en cada botón numerado y verá un conjunto diferente de comentarios.

Utilice paginación o desplazamiento infinito para una mejor navegación de datos

Ahora tiene una aplicación Vue muy básica que demuestra cómo paginar datos de manera eficiente. También puede utilizar el desplazamiento infinito para manejar conjuntos de datos largos en su aplicación. Asegúrate de considerar las necesidades de tu aplicación antes de elegirla, ya que la paginación y el desplazamiento infinito tienen ventajas y desventajas.