Concepto de Paginación Usando JavaScript

4 minuto(s)

En esta página:

Una paginación consiste básicamente en dividir los datos completos en partes de un tamaño específico y mostrar una parte o conjunto de datos en una página. Para ver otro conjunto de datos simplemente cambiamos de página. Muchos proyectos cuenta con una páginación. Un caso podría ser una tienda en línea que cuenta con varios productos y los usuarios pueden navegar por cada numero de página para ver más productos. En este Post te enseñaré el Concepto de Paginación Usando JavaScript, vamos con ello.

Antes de continuar te invito a leer los siguientes artículos:

Asimismo, te invito a escuchar el Podcast: “Porque El Lenguaje De Programación Python Es Tan Popular” y “¿ Porqué Es Importante Saber Programar en la Ciberseguridad ?:

Spotify:	Sound Cloud:	Apple Podcasts	Anchor Podcasts

Bien ahora continuemos con el Post: Concepto de Paginación Usando JavaScript.

Por ejemplo, tenemos un sitio web que muestra información de los usuarios. Entonces, cuando hacemos una solicitud de API, obtenemos datos de todos los usuarios, si mostramos todos los datos de los usuarios en una sola página, entonces no es una buena práctica, por lo tanto, usamos la paginación en la que mostramos números fijos de usuarios en una página y si queremos ver a otros usuarios el cambiamos la página.

Tipos de Paginación

Básicamente hay 2 formas de hacer paginaciones:

En el lado del Cliente (Cliente side)

En la paginación del lado del cliente, obtenemos todos los datos del servidor y ponemos la lógica de paginación en el lado del cliente. Pero si el conjunto de datos es muy grande, necesitamos mucho espacio para almacenarlo.

En el lado del Servidor (Server side)

En la paginación del lado del servidor, ponemos la lógica de paginación en el lado del servidor y obtenemos una cantidad fija de datos del servidor para cada página, pero el problema principal con la paginación del lado del servidor es llamar a una API para cada cambio de página.

Concepto de Paginación Usando JavaScript

Digamos que tenemos una matriz (array) de datos de 30 elementos:


// Array de elementos 
const elementos = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30];

// Array de elementos

const elementos = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30];

Considera la matriz de datos anterior, como los datos que estamos obteniendo de una API de lado del cliente o los datos que se almacenan en una base de datos (lado del servidor). Intentaremos entender la lógica de la paginación usando esa matriz de datos.

Para la paginación necesitamos tener algunas variables:

a) total_no_of_items: Se refiere al número total de elementos, que en este caso es 30 [data.length = 30].

b) items_per_page: Elementos que queremos que se muestren en una página, digamos que queremos 5 elementos por página.

c) no_of_pages: Se refiere en cuantas páginas podemos dividir nuestros datos completos. En este caso:


# Hacemos la siguiente division: 
no_of_pages = total_no_of_items / items_per_page 

# Es decir los 30 elementos de nuestra matriz, lo dividimos entre 6 
[30 / 6 = 5] 

# Y obtenemos 5 páginas 
no_of_pages = 5

# Hacemos la siguiente division:

no_of_pages = total_no_of_items / items_per_page

# Es decir los 30 elementos de nuestra matriz, lo dividimos entre 6

[30 / 6 = 5]

# Y obtenemos 5 páginas

no_of_pages = 5

d) page_number: El número de página en el que nos encontramos actualmente.

Entonces estos son los elementos que tendrá un número de página en particular para el caso anterior:


Página 1 -> [1 - 5]
Página 2 -> [6 - 10]
Página 3 -> [11 - 15]
Página 4 -> [16 - 20] 
Página 5 -> [21 - 30]

Página 1 -> [1 - 5]

Página 2 -> [6 - 10]

Página 3 -> [11 - 15]

Página 4 -> [16 - 20]

Página 5 -> [21 - 30]

Si estamos en la página 2, tenemos [6 – 10] mostrados. Veamos la lógica:


// Calculo a realizar 
items_to_skip = (page_number - 1) * items_per_page 

// Entonces calculamos 
[(2 - 1)*6 = 6]

// Calculo a realizar

items_to_skip = (page_number - 1) * items_per_page

// Entonces calculamos

[(2 - 1)*6 = 6]

El calculo anterior devuelve 6, por lo tanto necesitamos omitir 6 elementos y mostrar 6 elementos por página. Asi que podemos hacer items = data.slice(items_to_skip, items_to_skip + items_per_page) y la matriz de elementos tendrá los elementos numerados [6 – 10]

Conociendo todos los conceptos anteriores, en JavaScript podemos hacer lo siguiente:


const elementos = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]; 

const total_no_of_items = elementos.length;
const items_per_page = 6;
let no_of_pages = total_no_of_items / items_per_page;
let page_number = 2;

const items_to_skip = (page_number - 1) * items_per_page;
const items = elementos.slice(items_to_skip, items_per_page + items_to_skip);
console.log(items) 

// Obtenemos
[7, 8, 9, 10, 11, 12]

const elementos = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30];

const total_no_of_items = elementos.length;

const items_per_page = 6;

let no_of_pages = total_no_of_items / items_per_page;

let page_number = 2;

const items_to_skip = (page_number - 1) * items_per_page;

const items = elementos.slice(items_to_skip, items_per_page + items_to_skip);

console.log(items)

// Obtenemos

[7, 8, 9, 10, 11, 12]

Si ejecutamos el código anterior obtenemos los datos [7, 8, 9, 10, 11, 12] dentro de la página 2.

Conclusión

En este Post hemos aprendido varios conceptos acerca de como funciona una páginación en JavaScript. Sabiendo estos conceptos y poniendolos en práctica puedes crear páginaciones personalizadas y más avanzadas para tus proyectos.

Nota (s)

En otro Post, crearemos un sistema de paginación con CSS, HTML y JavaScript, y porque no con un lenguaje de servidor y una base de datos.
No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.