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.

Aprenda sobre la técnica y cómo implementarla en Vue con este proyecto de muestra.

Comenzando con Vue-Awesome-Paginate

Vue-impresionante-paginar 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 src/main.js archivo:

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 .usar() método, para que pueda usarlo en cualquier lugar 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. Usted será obteniendo datos de una API con Axios para esta aplicación.

Copie el bloque de código siguiente en su aplicación.vue archivo:

<scriptsetup>
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 JSONPlaceholderh1>
<divv-if="comments.length">
<divv-for="comment in comments"class="comment">
<p>{{ comment }}p>
div>
div>
<divv-else>
<p>Loading comments...p>
div>
div>
template>

Este bloque de código utiliza la API de composición de Vue para construir un componente. El componente utiliza Axios para recuperar comentarios de la API JSONPlaceholder antes de que Vue lo monte (enAntesMontar gancho). Luego almacena los comentarios en el comentarios array, 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 guion sección de tu aplicación.vue archivo con este código:

<scriptsetup>
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: por página y página actual. 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 llamada mostradoComentarios. Esto calcula el rango de comentarios basándose en el página actual y por página valores. Devuelve una porción del comentarios matriz dentro de ese rango, que agrupará los comentarios en diferentes páginas.

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

<template>
<div>
<h1>Vue 3 Pagination with JSONPlaceholderh1>
<divv-if="comments.length">
<divv-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>
<divv-else>
<p>Loading comments...p>
div>
div>
template>

El v-para atributo para renderizar listas en esta sección de plantilla apunta a la mostradoComentarios formación. La plantilla agrega el vue-impresionante-paginar componente, al que el fragmento anterior le pasa accesorios. Puede obtener más información sobre estos y accesorios adicionales en la página oficial del paquete. documentación en GitHub.

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.