Implementación de paginación con Axios

Introducción

En este proyecto, aprenderás cómo implementar la funcionalidad de paginación para una lista de cursos. La paginación es una característica esencial en el desarrollo web front-end, y este proyecto te guiará a través del proceso de obtener datos de un archivo JSON, mostrar los datos en un formato paginado y manejar la funcionalidad de las páginas anterior y siguiente.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo obtener datos de un archivo JSON utilizando la librería Axios
• Cómo mostrar los datos de los cursos en un formato paginado, con 5 elementos por página
• Cómo implementar la funcionalidad de los botones de página anterior y siguiente
• Cómo deshabilitar los botones de página anterior y siguiente cuando sea apropiado (primera y última página)
• Cómo actualizar la visualización de la paginación para mostrar el número de página actual y el número total de páginas

🏆 Logros

Después de completar este proyecto, podrás:

• Obtener datos de un archivo JSON utilizando Axios
• Implementar la funcionalidad de paginación para una lista de cursos
• Manejar las interacciones del usuario con los botones de página anterior y siguiente
• Deshabilitar condicionalmente los botones según la página actual
• Actualizar la interfaz de usuario para mostrar la página actual y el total de páginas

Skills Graph

Configurar la estructura del proyecto

En este paso, configurarás los archivos y la estructura del proyecto. Sigue los pasos a continuación para completar este paso:

Abre la carpeta del proyecto. La estructura del directorio es la siguiente:

├── css
│   └── bootstrap.css
├── index.html
└── js
    ├── axios.js
    ├── carlist.json
    └── index.js

En esta estructura:

• css/bootstrap.css es el archivo de estilo de Bootstrap utilizado en el proyecto.
• index.html es la página web principal.
• js/carlist.json es el archivo de datos necesario para la solicitud.
• js/axios.js es el archivo de axios utilizado para la solicitud.
• js/index.js es el archivo de JavaScript que se debe completar.

Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE para ejecutar el proyecto.

A continuación, abre "Web 8080" en la parte superior de la máquina virtual y actualízala manualmente y verás la página. El efecto es el siguiente:

Obtener datos del archivo JSON

En este paso, aprenderás cómo obtener datos del archivo carlist.json y almacenarlos en la variable data.

1. Encuentra el archivo js/index.js y busca el comentario // TODO: Requesting data from the carlist.json file.
2. Utiliza el método axios.get() para obtener los datos del archivo ./js/carlist.json.
3. Una vez que se obtengan los datos, guárdalos en la variable data.
4. Calcula el número máximo de páginas dividiendo el número total de elementos por el número de elementos por página (5). Guarda este valor en la variable maxPage.
5. Llama a la función showPagination() y pasa maxPage y pageNum (que está establecido en 1 por defecto) como argumentos para mostrar el número de página actual y el número total de páginas.
6. Llama a la función getPageData() y pasa data como argumento para obtener los datos de la primera página (elementos 1 - 5). Guarda esto en la variable pageData.
7. Llama a la función renderHtml() y pasa pageData como argumento para renderizar el HTML de la primera página.

Tu código debería verse así:

let data;
let pageData;
// TODO: Requesting data from the carlist.json file
axios.get("./js/carlist.json").then((res) => {
  data = res.data;
  maxPage = Math.ceil(data.length / 5);
  showPagination(maxPage, pageNum);
  pageData = getPageData(data);
  renderHtml(pageData);
});

Implementar la funcionalidad de la página anterior

En este paso, aprenderás cómo implementar la funcionalidad del botón de página anterior.

1. Encuentra el controlador de eventos de clic para el botón de página anterior (prev.onclick).
2. Dentro del controlador de eventos, primero elimina la clase disabled del botón de página siguiente (next.classList.remove("disabled")).
3. Decrementa la variable pageNum en 1 para moverte a la página anterior.
4. Si pageNum es menor o igual a 1, significa que estamos en la primera página, así que agrega la clase disabled al botón de página anterior (this.classList.add("disabled")) y establece pageNum en 1.
5. Llama a la función showPagination() y pasa maxPage y pageNum como argumentos para actualizar la visualización de la paginación.
6. Llama a la función getPageData() y pasa data como argumento para obtener los datos de la página actual. Guarda esto en la variable pageData.
7. Llama a la función renderHtml() y pasa pageData como argumento para renderizar el HTML de la página actual.

Tu código debería verse así:

// Click on the previous page
let prev = document.getElementById("prev");
prev.onclick = function () {
  // TODO
  next.classList.remove("disabled");
  pageNum--;
  if (pageNum <= 1) {
    this.classList.add("disabled");
    pageNum = 1;
  }
  showPagination(maxPage, pageNum);
  pageData = getPageData(data);
  renderHtml(pageData);
};

Implementar la funcionalidad de la página siguiente

En este paso, aprenderás cómo implementar la funcionalidad del botón de página siguiente.

1. Encuentra el controlador de eventos de clic para el botón de página siguiente (next.onclick).
2. Dentro del controlador de eventos, primero elimina la clase disabled del botón de página anterior (prev.classList.remove("disabled")).
3. Incrementa la variable pageNum en 1 para moverte a la página siguiente.
4. Si pageNum es mayor o igual a maxPage, significa que estamos en la última página, así que agrega la clase disabled al botón de página siguiente (this.classList.add("disabled")) y establece pageNum en maxPage.
5. Llama a la función showPagination() y pasa maxPage y pageNum como argumentos para actualizar la visualización de la paginación.
6. Llama a la función getPageData() y pasa data como argumento para obtener los datos de la página actual. Guarda esto en la variable pageData.
7. Llama a la función renderHtml() y pasa pageData como argumento para renderizar el HTML de la página actual.

Tu código debería verse así:

// Click on the next page
let next = document.getElementById("next");
next.onclick = function () {
  // TODO
  prev.classList.remove("disabled");
  pageNum++;
  if (pageNum >= maxPage) {
    this.classList.add("disabled");
    pageNum = maxPage;
  }
  showPagination(maxPage, pageNum);
  pageData = getPageData(data);
  renderHtml(pageData);
};

Ahora, has completado la implementación de la funcionalidad de paginación para la lista de cursos. Puedes probar la funcionalidad haciendo clic en los botones de página anterior y siguiente para ver que los datos de los cursos se muestran correctamente.

Un gif de todas las funciones completadas es el siguiente:

Resumen

¡Felicidades! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.