Construir un componente de paginación | Tutorial de JavaScript

Introducción

En este proyecto, aprenderás a construir un componente de paginación, que es un componente comúnmente utilizado en aplicaciones web. El componente de paginación ayuda a reducir el tiempo de consulta en el backend y no afecta el rendimiento de la representación de la página debido a la carga excesiva de datos.

👀 Vista previa

Demostración del componente de paginación

🎯 Tareas

En este proyecto, aprenderás:

Cómo implementar la función ajax para manejar solicitudes de datos y recuperar los datos de la página actual y el número total de páginas.
Cómo implementar la función initEvents para enlazar eventos a los botones del componente de paginación.
Cómo implementar la función createPaginationIndexArr para generar una matriz de paginación basada en los argumentos de la función.
Cómo implementar la función renderPagination para generar la plantilla de cadena para el componente de paginación.
Cómo representar el contenido basado en la página actual.

🏆 Logros

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

Construir un componente de paginación reutilizable en JavaScript.
Utilizar Axios para realizar solicitudes HTTP y manejar los datos de respuesta.
Generar una matriz de paginación basada en la página actual, el número total de páginas y el número máximo de botones de página a mostrar.
Actualizar el componente de paginación y el contenido basado en la página actual.

Configurar la estructura del proyecto

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

Abre la carpeta del proyecto. La estructura de directorios es la siguiente:

├── css
│   └── index.css
├── index.html
└── js
    ├── data.json
    ├── axios.min.js
    ├── util.js
    └── index.js

Donde:

css/index.css es el archivo de estilo CSS.
index.html es la página principal.
js/data.json es el archivo JSON que almacena los datos.
js/axios.min.js es el archivo de axios.
js/index.js es el archivo que se debe completar.
js/util.js es el archivo que almacena funciones de utilidad.

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

Luego, abre "Web 8080" en la parte superior de la VM y actualízala manualmente para ver la página.

Efecto inicial

Implementar la función ajax

En este paso, implementarás la función ajax en el archivo js/index.js para manejar la solicitud de datos.

Abre el archivo js/index.js.
Localiza la función ajax y completa la implementación.
La función ajax debe recuperar los datos de la página actual y el número total de páginas basados en los argumentos de la función, y devolverlos.
Puedes utilizar la biblioteca Axios proporcionada para realizar la solicitud HTTP al archivo ./js/data.json.

Aquí está la función ajax completada:

async function ajax({
  url,
  method = "get",
  data,
  query: { currentPage, pageSize }
}) {
  // TODO: Obtener los datos de la página actual de acuerdo con el objeto `query` de los parámetros de la función `currentPage, pageSize`.
  let result = {
    data: [],
    total: 0
  };

  let resData = [];
  let res = await axios[method](url, data);
  if (res.status === 200) {
    resData = res.data.data;
    result.total = res.data.total;
  }
  result.data = resData.slice(
    (currentPage - 1) * pageSize,
    currentPage * pageSize
  );

  return result;
}

Implementar la función initEvents

En este paso, implementarás la función initEvents en el archivo js/index.js, que enlaza eventos a los botones del componente de paginación.

Abre el archivo js/index.js.
Localiza la función initEvents y completa la implementación.
Cuando se hace clic en el botón "<", el valor de this.currentPage debe disminuir en 1, con un mínimo de 1.
Cuando se hace clic en el botón ">", el valor de this.currentPage debe aumentar en 1, con un máximo de this.totalPages.
Cuando el valor de this.currentPage cambia, el componente de paginación en la página debe actualizarse en consecuencia.

Aquí está la función initEvents completada:

initEvents() {
    this.root.querySelector("#btn-prev").addEventListener("click", () => {
      // TODO: Evento de clic para el botón "<", this.currentPage - 1 cuando se hace clic.
      if (this.currentPage > 1) {
        this.currentPage--;
        this.initPagination();
      }
    });
    this.root.querySelector("#btn-next").addEventListener("click", () => {
      // TODO: Evento de clic para el botón ">", this.currentPage + 1 cuando se hace clic.
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
        this.initPagination();
      }
    });
    this.root.querySelector(".pager").addEventListener("click", (e) => {
      if (e.target.nodeName.toLowerCase() === "li") {
        if (this.currentPage === e.target.innerText) return;
        if (e.target.classList.contains("more")) return;
        this.currentPage = Number(e.target.innerText);
      }
      this.initPagination();
    });
  }

Implementar la función createPaginationIndexArr

En este paso, implementarás la función createPaginationIndexArr en el archivo js/util.js, que genera una matriz de paginación (indexArr) basada en los argumentos de la función siguiendo ciertas reglas.

Abre el archivo js/util.js.
Localiza la función createPaginationIndexArr y completa la implementación.
La función debe generar la matriz de paginación (indexArr) basada en los parámetros pasados currentPage, totalPages y pagerCount.
Las reglas para generar la matriz de paginación son las siguientes:
- Caso especial: totalPages <= pagerCount
- Caso normal: totalPages > pagerCount
La indexArr generada debe seguir los ejemplos proporcionados en la descripción del desafío.

Aquí está la función createPaginationIndexArr completada:

const createPaginationIndexArr = (currentPage, totalPages, pagerCount) => {
  let indexArr = [];
  // TODO: Generar matriz de paginación basada en parámetros pasados indexArr.
  indexArr[0] = 1;
  if (totalPages <= pagerCount) {
    for (let i = 1; i < totalPages; i++) {
      indexArr.push(i + 1);
    }
  } else {
    indexArr[pagerCount - 1] = totalPages;
    if (currentPage <= pagerCount - 2) {
      for (let i = 1; i < pagerCount - 1; i++) {
        indexArr[i] = i + 1;
      }
    } else if (currentPage <= totalPages - pagerCount + 2) {
      let j = 1;
      for (
        let i = -Math.ceil((pagerCount - 3) / 2);
        i <= Math.floor((pagerCount - 3) / 2);
        i++
      ) {
        indexArr[j++] = currentPage + i;
      }
    } else {
      let j = 1;
      for (let i = totalPages - pagerCount + 2; i < totalPages; i++) {
        indexArr[j++] = i;
      }
    }
  }

  return indexArr;
};

Implementar la función renderPagination

En este paso, implementarás la función renderPagination en el archivo js/index.js, que genera la plantilla de cadena template para el componente de paginación basada en el arreglo indexArr.

Abre el archivo js/index.js.
Localiza la función renderPagination y completa la implementación.
La función debe generar la plantilla de cadena template para el componente de paginación basada en el arreglo indexArr, siguiendo las reglas descritas en la descripción del desafío.
La template generada debe insertarse en la estructura HTML del componente de paginación utilizando this.root.innerHTML.

Aquí está la función renderPagination completada:

renderPagination(indexArr) {
  let template = "";
  // TODO: Genera una plantilla de cadena template para el componente de paginación basada en el arreglo indexArr.
  template = indexArr.reduce((prev, next, index) => {
    if (indexArr[index] - indexArr[index - 1] > 1) {
      prev += `<li class="number more">...</li>`;
      prev += `<li class="number ${
        this.currentPage == next? "active" : ""
      }">${next}</li>`;
    } else {
      prev += `<li class="number ${
        this.currentPage == next? "active" : ""
      }">${next}</li>`;
    }
    return prev;
  }, "");

  this.root.innerHTML = `
      <div class="pagination">
          <div class="btn btn-left" id="btn-prev">&lt;</div>
          <ul class="pager">${template} </ul>
          <div class="btn btn-right" id="btn-next">&gt;</div>
      </div>`;
}

Probar el componente de paginación

En este paso, probarás el resultado final del componente de paginación.

Guarda los archivos js/index.js y js/util.js.
Refresca la página web en el navegador.
Verifica el efecto de la página.

¡Felicidades! Has completado la implementación del Componente de Paginación. El efecto final de la página debería ser el siguiente:

Image Description

Resumen

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

Construir un componente de paginación reusable