Cómo crear paginación personalizada con React

Introducción

A menudo tenemos que crear aplicaciones web en las que necesitamos buscar grandes conjuntos de registros de datos de un servidor remoto, API o una base de datos. Si está creando un sistema de pago, por ejemplo, podría ser buscar miles de transacciones. Si es una aplicación de redes sociales, podría ser buscar muchos comentarios de usuarios, perfiles o actividades. Sea cual sea la aplicación, existen varias soluciones para presentar los datos de una forma que no abrume al usuario final que interactúa con la aplicación.

Un método para administrar grandes conjuntos de datos es usar la paginación. La paginación funciona de forma efectiva cuando ya conoce el tamaño del conjunto de datos (el número total de registros en la base de datos). Segundo, solo carga el lote requerido de datos del conjunto total de datos según la interacción del usuario final con el control de paginación. Esta es la técnica usada a la hora de mostrar resultados de la búsqueda en Google.

En este tutorial, aprenderá cómo crear un componente de paginación personalizado con React para paginar grandes conjuntos de datos. Creará una vista paginada de los países del mundo, un conjunto de datos con un tamaño conocido.

Aquí tiene una demostración de lo que va a crear en este tutorial:

Requisitos previos

Para completar este tutorial, necesitará lo siguiente:

• Node instalado en su máquina. Podrá encontrar los pasos en Cómo instalar Node.js y crear un entorno de desarrollo local.
• El paquete de líneas de create-react-appcomando [create-react-app para crear el código de texto estándar para su aplicación React. Si está usando] npm < 5.2, es posible que deba instalar create-react-app como dependencia global.
• Finalmente, este tutorial asume que ya está familiarizado con React. Si no es así, puede consultar la serie Cómo crear código en React.js para obtener más información sobre React.

Este tutorial se verificó con Node v14.2.0, npm v6.14.4, react v16.13.1 y react-scripts v3.4.1.

Paso 1: Configurar el proyecto

Comience una nueva aplicación React usando el comando create-react-app. Puede ponerle el nombre que desee a la aplicación, pero este tutorial la llamará react-pagination:

npx create-react-app react-pagination

A continuación, instalará las dependencias necesarias para su aplicación. Primero, utilice la ventana del terminal para navegar al directorio del proyecto:

cd react-pagination

Ejecute el siguiente comando para instalar las dependencias necesarias:

npm install bootstrap@4.1.0 prop-types@15.6.1 react-flags@0.1.13 countries-api@2.0.1 node-sass@4.14.1

Esto instalará bootstrap, prop-types, react-flags, countries-api y node-sass.

Instaló el paquete bootstrap como dependencia para su aplicación, ya que necesitará algunos estilos predeterminados. También usará los estilos del componente de pagination de Bootstrap.

Para incluir Bootstrap en la aplicación, edite el archivo src/index.js:

nano src/index.js

Y añada la siguiente línea antes de las demás declaraciones import:

import "bootstrap/dist/css/bootstrap.min.css";

Ahora los estilos de Bootstrap estarán disponibles para su aplicación.

También instaló react-flags como dependencia para su aplicación. Para obtener acceso a los iconos de banderas de su aplicación, necesitará copiar las imágenes de iconos al directorio public de su aplicación.

Cree un directorio img en su directorio public:

mkdir public/img

Copie los archivos de imágenes en flags a img:

cp -R node_modules/react-flags/vendor/flags public/img

Esto proporciona una copia de todas las imágenes react-flag para su aplicación.

Ahora que ha incluido algunas dependencias, inicie la aplicación ejecutando el siguiente comando con npm desde el directorio del proyecto react-pagination.

npm start

Ahora que ha iniciado la aplicación, puede comenzar el desarrollo. Observe que se abrió una ventana del navegador con la funcionalidad live-reloading para mantener la sincronización con la aplicación a medida que desarrolla.

En este momento, la vista de la aplicación debería parecerse a la siguiente captura de pantalla:

Ahora está listo para comenzar a crear componentes.

Paso 2: Crear el componente CountryCard

En este paso, creará el componente CountryCard. El componente CountryCard renderiza el nombre, región y bandera de un país concreto.

Primero, vamos a crear un directorio components en el directorio src:

mkdir src/components

A continuación, cree un nuevo archivo CountryCard.js en el directorio src/components:

nano src/components/CountryCard.js

Luego, añádale el siguiente snippet:

import React from 'react';
import PropTypes from 'prop-types';
import Flag from 'react-flags';

const CountryCard = props => {
  const {
    cca2: code2 = '', region = null, name = {}
  } = props.country || {};

  return (
    <div className="col-sm-6 col-md-4 country-card">
      <div className="country-card-container border-gray rounded border mx-2 my-3 d-flex flex-row align-items-center p-0 bg-light">
        <div className="h-100 position-relative border-gray border-right px-2 bg-white rounded-left">
          <Flag country={code2} format="png" pngSize={64} basePath="./img/flags" className="d-block h-100" />
        </div>
        <div className="px-3">
          <span className="country-name text-dark d-block font-weight-bold">{ name.common }</span>
          <span className="country-region text-secondary text-uppercase">{ region }</span>
        </div>
      </div>
    </div>
  )
}

CountryCard.propTypes = {
  country: PropTypes.shape({
    cca2: PropTypes.string.isRequired,
    region: PropTypes.string.isRequired,
    name: PropTypes.shape({
      common: PropTypes.string.isRequired
    }).isRequired
  }).isRequired
};

export default CountryCard;

El componente CountryCard requiere una propiedad country que contiene los datos sobre el país que va a renderizar. Como se ha visto en los propTypes para el componente CountryCard, el objeto prop country debe contener los siguientes datos:

• cca2: código del país de 2 dígitos
• region: la región del país (por ejemplo, “África”)
• name.common: el nombre común del país (por ejemplo “Nigeria”)

Aquí hay un objetivo de país de muestra:

{
  cca2: "NG",
  region: "Africa",
  name: {
    common: "Nigeria"
  }
}

Además, observe cómo renderiza la bandera del país usando el paquete react-flags. Puede comprobar la [documentación react-flags] react-flagspara obtener más información sobre los props necesarios y cómo usar el paquete.

Ahora ha completado un componente CountryCard individual. Finalmente, usará CountryCard varias veces para mostrar diferentes banderas e información del país en su aplicación.

Paso 3: Crear el componente Pagination

En este paso, creará el componente Pagination. El componente Pagination contiene la lógica para crear, renderizar y cambiar páginas en el control de paginación.

A continuación, cree un nuevo archivo Pagination.js en el directorio src/components:

nano src/components/Pagination.js

Luego, añádale el siguiente snippet:

import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';

class Pagination extends Component {
  constructor(props) {
    super(props);
    const { totalRecords = null, pageLimit = 30, pageNeighbours = 0 } = props;

    this.pageLimit = typeof pageLimit === 'number' ? pageLimit : 30;
    this.totalRecords = typeof totalRecords === 'number' ? totalRecords : 0;

    // pageNeighbours can be: 0, 1 or 2
    this.pageNeighbours = typeof pageNeighbours === 'number'
      ? Math.max(0, Math.min(pageNeighbours, 2))
      : 0;

    this.totalPages = Math.ceil(this.totalRecords / this.pageLimit);

    this.state = { currentPage: 1 };
  }
}

Pagination.propTypes = {
  totalRecords: PropTypes.number.isRequired,
  pageLimit: PropTypes.number,
  pageNeighbours: PropTypes.number,
  onPageChanged: PropTypes.func
};

export default Pagination;

El componente Pagination puede tomar cuatro propiedades especiales como se especifica en el objeto propTypes.

• onPageChanged es una función invocada con datos del estado de paginación actual solo cuando la página actual cambia.
• totalRecords indica el número total de registros que se paginarán. Es obligatorio.
• pageLimit indica el número de registros que se mostrarán por página. Si no se especifica, vuelve al valor predeterminado de 30 como se ha definido en el constructor().
• pageNeighbours indica el número de números de páginas adicionales para mostrar en cada lado de la página actual. El valor mínimo es 0 y el valor máximo es 2. Si no se especifica, vuelve al valor 0, como se definió en constructor().

La siguiente imagen ilustra el efecto de los diferentes valores del prop pageNeighbours:

En la función constructor(), calcule las páginas totales de la siguiente manera:

this.totalPages = Math.ceil(this.totalRecords / this.pageLimit);

Observe que aquí utiliza Math.ceil() para garantizar que obtiene un valor entero para el número total de páginas. Esto también garantiza que el excedente de registros se captura en la última página, especialmente en los casos en que el número de registros que sobran es menor que el número de registros que se mostrarán por página.

Finalmente, inició el estado con la propiedad currentPage configurada en 1. Necesita esta propiedad de estado para realizar un seguimiento interno de la página actualmente activa.

A continuación, creará el método para generar los números de página.

Tras las importaciones pero antes de la clase Pagination, añada las siguientes constantes y una función range:

// ...

const LEFT_PAGE = 'LEFT';
const RIGHT_PAGE = 'RIGHT';

/**
 * Helper method for creating a range of numbers
 * range(1, 5) => [1, 2, 3, 4, 5]
 */
const range = (from, to, step = 1) => {
  let i = from;
  const range = [];

  while (i <= to) {
    range.push(i);
    i += step;
  }

  return range;
}

En la clase Pagination, tras el constructor, añada el siguiente método fetchPageNumbers:

class Pagination extends Component {
  // ...

  /**
   * Let's say we have 10 pages and we set pageNeighbours to 2
   * Given that the current page is 6
   * The pagination control will look like the following:
   *
   * (1) < {4 5} [6] {7 8} > (10)
   *
   * (x) => terminal pages: first and last page(always visible)
   * [x] => represents current page
   * {...x} => represents page neighbours
   */
  fetchPageNumbers = () => {
    const totalPages = this.totalPages;
    const currentPage = this.state.currentPage;
    const pageNeighbours = this.pageNeighbours;

    /**
     * totalNumbers: the total page numbers to show on the control
     * totalBlocks: totalNumbers + 2 to cover for the left(<) and right(>) controls
     */
    const totalNumbers = (this.pageNeighbours * 2) + 3;
    const totalBlocks = totalNumbers + 2;

    if (totalPages > totalBlocks) {
      const startPage = Math.max(2, currentPage - pageNeighbours);
      const endPage = Math.min(totalPages - 1, currentPage + pageNeighbours);
      let pages = range(startPage, endPage);

      /**
       * hasLeftSpill: has hidden pages to the left
       * hasRightSpill: has hidden pages to the right
       * spillOffset: number of hidden pages either to the left or to the right
       */
      const hasLeftSpill = startPage > 2;
      const hasRightSpill = (totalPages - endPage) > 1;
      const spillOffset = totalNumbers - (pages.length + 1);

      switch (true) {
        // handle: (1) < {5 6} [7] {8 9} (10)
        case (hasLeftSpill && !hasRightSpill): {
          const extraPages = range(startPage - spillOffset, startPage - 1);
          pages = [LEFT_PAGE, ...extraPages, ...pages];
          break;
        }

        // handle: (1) {2 3} [4] {5 6} > (10)
        case (!hasLeftSpill && hasRightSpill): {
          const extraPages = range(endPage + 1, endPage + spillOffset);
          pages = [...pages, ...extraPages, RIGHT_PAGE];
          break;
        }

        // handle: (1) < {4 5} [6] {7 8} > (10)
        case (hasLeftSpill && hasRightSpill):
        default: {
          pages = [LEFT_PAGE, ...pages, RIGHT_PAGE];
          break;
        }
      }

      return [1, ...pages, totalPages];
    }

    return range(1, totalPages);
  }
}

Aquí, primero define dos constantes: LEFT_PAGE y RIGHT_PAGE. Estas constantes se usarán para indicar puntos en los que tiene controles de página para moverse a la izquierda y derecha respectivamente.

También definió una función de ayuda range() que puede ayudar a generar intervalos de números.

range(1, 5); // returns [1, 2, 3, 4, 5]
_.range(1, 5); // returns [1, 2, 3, 4]

A continuación, definió el método fetchPageNumbers() en la clase Pagination. Este método gestiona la lógica principal para generar los números de página que se mostrarán en el control de paginación. Quiere que la primera página y la última página siempre estén visibles.

Primero, ha definido un par de variables. totalNumbers representa los números de página en total que se mostrarán en el control. totalBlocks representa el número total de páginas que se mostrará más dos bloques adicionales para los indicadores de página izquierda y derecha.

Si totalPages no es mayor que totalBlocks, devuelve un intervalo de número desde 1 a totalPages. De lo contrario, devolverá la matriz de números de página, con LEFT_PAGE y RIGHT_PAGE en los lugares donde tenga páginas que se reparten a la izquierda y la derecha, respectivamente.

Sin embargo, observe que su control de paginación garantiza que la primera página y la última página siempre estén visibles. Los controles de página izquierda y derecha aparecen hacia dentro.

Ahora, añadirá el método render() para permitirle renderizar el control de paginación.

En la clase Pagination, tras el método constructor y fetchPageNumbers, añada el siguiente método render:

class Pagination extends Component {
  // ...

  render() {
    if (!this.totalRecords || this.totalPages === 1) return null;

    const { currentPage } = this.state;
    const pages = this.fetchPageNumbers();

    return (
      <Fragment>
        <nav aria-label="Countries Pagination">
          <ul className="pagination">
            { pages.map((page, index) => {

              if (page === LEFT_PAGE) return (
                <li key={index} className="page-item">
                  <a className="page-link" href="#" aria-label="Previous" onClick={this.handleMoveLeft}>
                    <span aria-hidden="true">&laquo;</span>
                    <span className="sr-only">Previous</span>
                  </a>
                </li>
              );

              if (page === RIGHT_PAGE) return (
                <li key={index} className="page-item">
                  <a className="page-link" href="#" aria-label="Next" onClick={this.handleMoveRight}>
                    <span aria-hidden="true">&raquo;</span>
                    <span className="sr-only">Next</span>
                  </a>
                </li>
              );

              return (
                <li key={index} className={`page-item${ currentPage === page ? ' active' : ''}`}>
                  <a className="page-link" href="#" onClick={ this.handleClick(page) }>{ page }</a>
                </li>
              );

            }) }

          </ul>
        </nav>
      </Fragment>
    );
  }
}

Aquí, genera la matriz de números de página invocando el método fetchPageNumbers() que creó anteriormente. A continuación renderiza cada número de página usando Array.prototype.map(). Observe que registra los controladores de eventos de clic en cada número de página renderizada para gestionar los clics.

Además, observe que el control de paginación no se renderizará si el prop totalRecords no se pasó correctamente al componente Pagination o en los casos en que solo haya 1 página.

Finalmente, definirá los métodos del controlador de eventos.

En la clase Pagination, tras el constructor y el método fetchPageNumbers y el método render, añada lo siguiente:

class Pagination extends Component {
  // ...

  componentDidMount() {
    this.gotoPage(1);
  }

  gotoPage = page => {
    const { onPageChanged = f => f } = this.props;
    const currentPage = Math.max(0, Math.min(page, this.totalPages));
    const paginationData = {
      currentPage,
      totalPages: this.totalPages,
      pageLimit: this.pageLimit,
      totalRecords: this.totalRecords
    };

    this.setState({ currentPage }, () => onPageChanged(paginationData));
  }

  handleClick = page => evt => {
    evt.preventDefault();
    this.gotoPage(page);
  }

  handleMoveLeft = evt => {
    evt.preventDefault();
    this.gotoPage(this.state.currentPage - (this.pageNeighbours * 2) - 1);
  }

  handleMoveRight = evt => {
    evt.preventDefault();
    this.gotoPage(this.state.currentPage + (this.pageNeighbours * 2) + 1);
  }
}

Define el método gotoPage() que modifica el estado y establece currentPage a la página especificada. Garantiza que el argumento page tiene un valor mínimo de 1 y un valor máximo del número total de páginas. Finalmente invoca la función onPageChanged() que se pasó como prop, con datos que indican el nuevo estado de paginación.

Cuando se monta el componente, va a la primera página invocando this.gotoPage(1) como se muestra en el método de ciclo de vida componentDidMount().

Observe cómo usa (this.pageNeighbours * 2) en handleMoveLeft() y handleMoveRight() para deslizar los números de página a la izquierda y a la derecha, respectivamente, según el número de página actual.

Aquí tiene una demostración de la interacción del movimiento izquierdo a derecho.

Ahora ha completado el componente Pagination. Los usuarios podrá interactuar con los controles de navegación en este componente para mostrar diferentes páginas de banderas.

Paso 4: Crear el componente App

Ahora que tiene un componente CountryCard y Pagination, puede usarlos en su componente App.

Modifique el archivo App.js en el directorio src:

nano src/App.js

Sustituya el contenido de App.js con las siguientes líneas de código:

import React, { Component } from 'react';
import Countries from 'countries-api';
import './App.css';
import Pagination from './components/Pagination';
import CountryCard from './components/CountryCard';

class App extends Component {
  state = { allCountries: [], currentCountries: [], currentPage: null, totalPages: null }

  componentDidMount() {
    const { data: allCountries = [] } = Countries.findAll();
    this.setState({ allCountries });
  }

  onPageChanged = data => {
    const { allCountries } = this.state;
    const { currentPage, totalPages, pageLimit } = data;
    const offset = (currentPage - 1) * pageLimit;
    const currentCountries = allCountries.slice(offset, offset + pageLimit);

    this.setState({ currentPage, currentCountries, totalPages });
  }
}

export default App;

Aquí inicia el estado del componente App con los siguientes atributos:

• allCountries - Esta es una matriz de todos los países en su aplicación. Iniciado a una matriz vacía ([]).
• currentCountries - Esta es una matriz de todos los países que se mostrarán en la página activa actualmente. Iniciado a una matriz vacía ([]).
• currentPage - El número de página de la página activa actualmente. Iniciado a null.
• totalPages - El número de páginas en total para todos los registros de país. Iniciado a null.

A continuación, en el método de ciclo de vida componentDidMount(), busca todos los países del mundo usando el paquete countries-api invocando Countries.findAll(). A continuación, actualiza el estado de la aplicación, configurando allCountries para que contenga todos los países del mundo. Puede consultar la documentación de countries-api para obtener más información sobre el paquete.

Finalmente, definió el método onPageChanged(), que invocaremos cada vez que navegue a una nueva página desde el control de paginación. Este método se pasará a la propiedad onPageChanged del componente Pagination.

Hay dos líneas a las que vale la pena prestar atención en este método. La primera es esta línea:

const offset = (currentPage - 1) * pageLimit;

El valor offset indica el índice de inicio para buscar los registros para la página actual. Usar (currentPage - 1) garantiza que el offset se basa en cero. Digamos, por ejemplo, que está mostrando 25 registros por página, y actualmente está viendo la página 5. Luego el offset será (5 - 1) * 25 = 100).

Por ejemplo, si está buscando registros bajo demanda desde una base de datos, esta es una consulta SQL de muestra para mostrarle cómo usar la posición inicial:

SELECT * FROM `countries` LIMIT 100, 25

Ya que no está buscando registros desde una base de datos o cualquier fuente externa, necesita una forma de extraer el bloque de registros requerido que se mostrará para la página actual.

La segunda es esta línea:

const currentCountries = allCountries.slice(offset, offset + pageLimit);

Aquí utiliza el método Array.prototype.slice() para extraer el bloque de registros requerido desde allCountries pasando offset como el índica de inicio para la porción y (offset + pageLimit) como el índice antes del cual finalizar la porción.

onPageChanged = data => {
  const { currentPage, totalPages, pageLimit } = data;

  axios.get(`/api/countries?page=${currentPage}&limit=${pageLimit}`)
    .then(response => {
      const currentCountries = response.data.countries;
      this.setState({ currentPage, currentCountries, totalPages });
    });
}

Ahora, puede terminar el componente App añadiendo el método render().

En la clase App, pero tras componentDidMount y onPageChanged, añada el siguiente método render:

class App extends Component {
  // ... other methods here ...

  render() {
    const { allCountries, currentCountries, currentPage, totalPages } = this.state;
    const totalCountries = allCountries.length;

    if (totalCountries === 0) return null;

    const headerClass = ['text-dark py-2 pr-4 m-0', currentPage ? 'border-gray border-right' : ''].join(' ').trim();

    return (
      <div className="container mb-5">
        <div className="row d-flex flex-row py-5">
          <div className="w-100 px-4 py-5 d-flex flex-row flex-wrap align-items-center justify-content-between">
            <div className="d-flex flex-row align-items-center">
              <h2 className={headerClass}>
                <strong className="text-secondary">{totalCountries}</strong> Countries
              </h2>
              { currentPage && (
                <span className="current-page d-inline-block h-100 pl-4 text-secondary">
                  Page <span className="font-weight-bold">{ currentPage }</span> / <span className="font-weight-bold">{ totalPages }</span>
                </span>
              ) }
            </div>
            <div className="d-flex flex-row py-4 align-items-center">
              <Pagination totalRecords={totalCountries} pageLimit={18} pageNeighbours={1} onPageChanged={this.onPageChanged} />
            </div>
          </div>
          { currentCountries.map(country => <CountryCard key={country.cca3} country={country} />) }
        </div>
      </div>
    );
  }
}

En el método render(), renderiza el número total de países, la página actual, el número de páginas en total, el control <Pagination>, y luego la <CountryCard> para cada país en la página actual.

Observe que ha pasado el método onPageChanged() que definió anteriormente para el prop onPageChanged del control <Pagination>. Esto es muy importante para capturar los cambios en la página desde el componente Pagination. También está mostrando 18 países por página.

En este momento, la aplicación tendrá un aspecto similar a la siguiente captura de pantalla:

Ahora tiene un componente App que muestra varios componentes CountryCard y un componente Pagination que desglosa los contenidos en páginas independientes. A continuación, explorará el estilo de su aplicación.

Paso 5: Añadir estilos personalizados

Quizá haya notado que estuvo añadiendo algunas clases personalizadas a los componentes que creó antes. Vamos a definir algunas reglas de estilo para esas clases en el archivo src/App.scss.

nano src/App.scss

El archivo App.scss tendrá el aspecto del siguiente snippet:

/* Declare some variables */
$base-color: #ced4da;
$light-background: lighten(desaturate($base-color, 50%), 12.5%);

.current-page {
  font-size: 1.5rem;
  vertical-align: middle;
}

.country-card-container {
  height: 60px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.country-name {
  font-size: 0.9rem;
}

.country-region {
  font-size: 0.7rem;
}

.current-page,
.country-name,
.country-region {
  line-height: 1;
}

// Override some Bootstrap pagination styles
ul.pagination {
  margin-top: 0;
  margin-bottom: 0;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);

  li.page-item.active {
    a.page-link {
      color: saturate(darken($base-color, 50%), 5%) !important;
      background-color: saturate(lighten($base-color, 7.5%), 2.5%) !important;
      border-color: $base-color !important;
    }
  }

  a.page-link {
    padding: 0.75rem 1rem;
    min-width: 3.5rem;
    text-align: center;
    box-shadow: none !important;
    border-color: $base-color !important;
    color: saturate(darken($base-color, 30%), 10%);
    font-weight: 900;
    font-size: 1rem;

    &:hover {
      background-color: $light-background;
    }
  }
}

Modifique su archivo App.js para referenciar a App.scss en vez de a App.css.

nano src/App.js

import React, { Component } from 'react';
import Countries from 'countries-api';
import './App.scss';
import Pagination from './components/Pagination';
import CountryCard from './components/CountryCard';

Tras añadir los estilos, la aplicación ahora tendrá un aspecto similar al de la siguiente captura de pantalla:

Ahora ha completado la aplicación con estilos personalizados adicionales. Puede usar estilos personalizados para modificar y mejorar cualquier estilo predeterminado proporcionado por las bibliotecas como Bootstrap.

Conclusión

En este tutorial, creó un widget de paginación personalizado en su aplicación React. Aunque no realizó invocaciones a ninguna API ni interactuar con cualquier backend en este tutorial, su aplicación puede demandar dichas interacciones. No está limitado al enfoque usado en este tutorial, puede ampliarlo como desee para adaptarse a los requisitos de su aplicación.

Para ver el código fuente completo de este tutorial, consulte el repositorio build-react-pagination-demo en GitHub. También puede obtener una demostración en vivo de este tutorial en Code Sandbox.

Si desea aprender más sobre React, eche un vistazo a nuestra serie Cómo crear código en React.js, o consulte nuestra página del tema React para ver ejercicios y proyectos de programación.