Introducción

Al crear un sitio web o una aplicación web, especialmente si presentan una gran cantidad de plantilla contenido (como una cuadrícula o una lista de elementos que pertenecen a una categoría); por lo general, es una buena idea dividirlo en páginas para reducir el número de elementos que aparecen en la pantalla a la vez.

En este artículo, aprenderemos cómo implementar la paginación en nuestros proyectos web usando JavaScript Vanilla desde cero.

A los efectos de este artículo, buscaremos el contenido de así ejemplo de respuesta de la API. Contiene 100 puntos de datos, pero solo usaremos 30 y mostraremos 6 publicaciones en nuestra pantalla a la vez.

Cómo Empezar

Antes de obtener todas las publicaciones requeridas de la API utilizando la API Fetch integrada de los navegadores, primero debemos crear un marcado HTML básico que se completará dinámicamente a través de nuestro script más adelante:

<div class="container"> <div class="title-section"> <h1 class="title">Posts</h1> </div> <div class="posts-section"></div> <div class="pagination-section"> <ul class="pagination"> <li class="page-item prev"><a class="page-link" href="#">Previous</a></li> <li class="page-item next"><a class="page-link" href="#">Next</a></li> </ul> </div>
</div>

Obtener publicaciones de API REST

Como se mencionó anteriormente, la paginación se trata de dividir el contenido en partes más pequeñas. Requiere que obtenga los datos, decida cuándo y cómo dividirlos, calcule la cantidad de páginas y luego muestre una parte al usuario. Afortunadamente, la funcionalidad de back-end generalmente se encarga de las primeras tareas y devuelve la página relevante, el número total de páginas y el contenido. por página.

Nota: Dependiendo de la API específica con la que esté trabajando, es posible que pueda o no obtener resultados de carga diferida. Siempre que sea posible, prefiera resultados de carga lenta en lugar de cargarlos todos por adelantado. La mayoría de las API modernas siguen prácticas que le permiten establecer un limit or page contar y devolver el número total de páginas que puede mostrar al usuario.

Comencemos por buscar primero todas nuestras publicaciones y luego modificaremos esto para consultar solo algunos puntos de datos por página:

const postsSection = document.querySelector(".posts-section"); const fetchPosts = async () => { const response = await fetch( "https://jsonplaceholder.typicode.com/posts" ); const posts = await response.json(); postsSection.innerHTML = ""; posts.forEach((post) => { postsSection.innerHTML += ` <div class="posts-card"> <div class="post-title"> <h2 class="post-title-text">${post.title}</h2> </div> <div class="post-body"> <p class="post-body-text"> ${post.body} </p> </div> </div> `; });
}; fetchPosts();

Examinemos rápidamente el código anterior. En primer lugar, comenzamos por obtener la div elemento donde estaríamos mostrando todo nuestro contenido a través de la class nombre que le asignamos div. Finalmente, escribimos una función para manejar la operación de búsqueda.

En fetchPosts() función, usamos la Fetch API para recuperar publicaciones de API de publicaciones de marcador de posición JSON, luego almacene los datos JSON a los que hace referencia el posts variable y usó la innerHTML propiedad para agregar cada pieza de contenido a la posts-section recorriéndolos.

En este punto, hemos obtenido con éxito todo nuestro contenido.

Nota: También puede obtener el contenido usando un método diferente, pero asegúrese de que todo su contenido esté cargado en esa página antes de sumergirnos en la creación de la paginación.

Comencemos declarando tres variables que son críticas para implementar la paginación dentro de nuestra página web. El primero es el número de publicaciones que queremos declarar por página, Entonces el número de página actual (1 por defecto), y el Número total de páginas.

Nota: Al consumir datos de una base de datos y API startdard, el cuenta total de las páginas o los puntos de datos generalmente se devuelve. Si no recibimos un recuento total de páginas, se puede calcular mediante el recuento total de objetos y el tamaño de página.

Para esta guía le daremos la Número total de páginas un número fijo de 30:

const numberPerPage = 6;
var pageNumber = 1;
var numberOfPages = 30;

En la sección anterior, mostramos todas las publicaciones en una sola página, pero queremos mostrar solo seis a la vez. Por lo tanto, hemos establecido el numberPerPage a 6 que ahora usaremos para ajustar la operación de búsqueda para que solo muestre 6 puestos.

Depende de la implementación específica, pero es una práctica generalizada permitir que se usen parámetros de consulta al obtener resultados de las API, lo que le permite obtener una determinada página de los resultados Por ejemplo, la API REST simulada que estamos usando permite la page y limit parámetros que le permiten cargar solo los lotes que mostrará en un momento dado.

¡De esta manera, solo cargamos los datos que queremos mostrar al usuario! Luego, podemos precargar la siguiente página para un tiempo de carga más rápido o deleitarnos con la aceleración computacional lograda al cargar solo los datos que se mostrarán.

Haremos uso de estos parámetros modificando nuestra solicitud de recuperación:

const fetchPosts = async (pageNumber) => { const response = await fetch( `https://jsonplaceholder.typicode.com/posts?_page=${pageNumber}&_limit=${numberPerPage}` ); const posts = await response.json(); postsSection.innerHTML = ""; posts.forEach((post) => { postsSection.innerHTML += ` <div class="posts-card"> <div class="post-title"> <h2 class="post-title-text">${post.title}</h2> </div> <div class="post-body"> <p class="post-body-text"> ${post.body} </p> </div> </div> `; });
}; fetchPosts();

En el código anterior, agregamos los dos parámetros al extremo de la API, que son los pageNumber y del número de publicaciones por página lo que nos ayudaría a dividir nuestras publicaciones en varias páginas y luego estas publicaciones ahora se pueden mostrar según el número de página.

Además, también pasamos en el pageNumber En el correo electrónico “Su Cuenta de Usuario en su Nuevo Sistema XNUMXCX”. fetchPosts() para que podamos llamar a esta función cada vez que cambie la página:

Ahora agreguemos funcionalidad a los botones de navegación de la página en la parte inferior de nuestra página y hagamos que muestren el contenido apropiado según el número de página.

Notaremos que en el marcado teníamos una sección que mostraba los botones de paginación:

<div class="pagination-section"> <ul class="pagination"> <li class="page-item prev"><a class="page-link" href="#">Previous</a></li> <li class="page-item next"><a class="page-link" href="#">Next</a></li> </ul>
</div>

ahora vamos a agregar click eventos a cada botón para que cuando se haga clic en ellos, aparezca el contenido destinado a esa página.

Implementando el Previo Botón

La lógica aquí es bastante simple. Todo lo que tenemos que hacer es recuperar el elemento que representa el botón anterior, añade el click detector de eventos y mostrar el contenido apropiado cuando se hace clic en el botón:

const prev = document.querySelector('.prev');
prev.addEventListener('click', (e) => { e.preventDefault(); if (pageNumber > 1) { pageNumber--; fetchPosts(pageNumber); }
});

Después de agregar un click detector de eventos, hemos comprobado si el número de página actual es mayor que 1 en la función de devolución de llamada. Si el número es igual o menor que 1, seguiremos mostrando el contenido actual. Pero si el número de página actual es mayor que 1 podemos decrementar libremente su valor y llamar al fetchPosts(pageNumber) con el nuevo número de página pasado como argumento, mostrando así el contenido de la página anterior.

Implementando el Siguiente Botón

La lógica aquí es completamente la misma que para el anterior botón, con sólo unos pocos cambios menores. Por supuesto, recuperaremos el elemento de la lista con la clase next en lugar de prev. Además, comprobaremos si el número de página actual es menor que el número de páginas a la que nos pusimos 30 manualmente antes. Al final, incrementaremos el número de página actual en lugar de disminuirlo:

const next = document.querySelector(".next");
next.addEventListener("click", (e) => { e.preventDefault(); if (pageNumber < numberOfPages) { pageNumber++; fetchPosts(pageNumber); }
});

Conclusión

Dividir el contenido en fragmentos más pequeños y manejables que se muestran individualmente es crucial cuando intenta mostrar una base de datos o cualquier otra fuente de datos en su aplicación web.

En este artículo, echamos un vistazo a cómo implementar la paginación con JavaScript desde cero, sin bibliotecas ni herramientas externas.

• Distribución de relaciones públicas y contenido potenciado por SEO. Consiga amplificado hoy.
• Platoblockchain. Inteligencia del Metaverso Web3. Conocimiento amplificado. Accede Aquí.
• Fuente: https://stackabuse.com/pagination-in-vanilla-javascript/