En este tutorial aprenderemos a hacer una simple paginación de datos con HTML, CSS y JavaScript, en la plataforma Node.js y utilizando el gestor de base de datos MongoDB para una mejor vista y optimización de nuestros datos en una aplicación.

Cuando una aplicación tiene demasiados datos almacenados, el mostrarlos se vuelve un poco tedioso, además que el llamado de todos esos datos hace lenta nuestra aplicación. Para evitar esos problemas es recomendable utilizar paginación, para poder traer por partes nuestros datos y poder mostrarlos en nuestra aplicación.

MongoDB es un gestor de base de datos no relacional que nos proporciona muchas funciones para un acceso rápido y sencillo a la base de datos sin la necesidad de usar el lenguaje sql. Para traer nuestros datos de la base de datos usaremos las siguientes funciones:

.find()

Selecciona documentos en una colección y devuelve un cursor en los documentos seleccionados.

parámetros :

• query, opcional. Especifica filtro de selección a través de operadores de consulta. si no se desea hacer un filtro se puede omitir o pasar un documento vacío ({ }).
• projection, opcional. Especifica los campos a devolver en los documentos que coinciden con el filtro de consulta. Para devolver todos los campos en los documentos coincidentes, omita este parámetro.

.count()

Cuenta el número de documentos en una colección. Devuelve un documento que contiene este conteo y así como el estado de los controles.

.skip()

Salta sobre un número de documentos y pasa el resto de documentos, como parámetro le indicamos el número de documentos a saltar.

.limit()

Limita el número de documentos que se traen de la base de datos, el número de documentos que queremos recuperar se le pasa como parámetros.

En el controlador de nuestra aplicación declaramos nuestra ruta:

router.route('usuarios/page/:num_page')

Obtenemos los parámetros de nuestra url enviados por el método get, que en nuestro caso es el numero de pagina, como viene en formato texto lo pasamos a un entero.

num_page = parseInt(req.params.num_page)

En este ejemplo queremos mostrar solo 20 datos por página, los saltos que daremos son de 20 en 20 dependiendo del número de página.

skip_page = (num_page-1)*20

Contamos el número total de usuarios en la base de datos, y calculamos el número de páginas que vamos a tener, para esto realizamos un count y lo dividimos entre el número de datos por páginas, sumamos 1 y lo convertimos a un entero.

User
.count()
.then(function ( count ){
num_pages = parseInt((count/20)+1);
});

Por ejemplo si tenemos 1171 usuarios, tendríamos 58 paginas de 20 y necesitamos 1 pagina mas para los 11 restantes, entonces tendríamos 59 páginas.

Luego obtenemos los datos, en este caso queremos solo los usuarios que están activos pero solo necesitamos de cada usuario su nombre de usuario y su información personal, dependiendo de la página saltamos al inicio de ella y obtenemos solo lo próximos 20 documentos.

User
.find({ is_active: true },{username:1, personal_info:1})
.skip(skip_page)
.limit(20)
.lean()

Enviamos todos estos datos a nuestro template

context = {
users : users,
num_page: num_page,
num_pages: num_pages
}
res.render('users.html', context);

En nuestro template primero vamos a crear una sección con la clase paginación, y una lista de elementos que agregaremos después dentro del div con id= "paginas".

HTML

Luego en un script establecemos el inicio y fin de nuestra paginación dependiendo del número de páginas que tengamos, siempre mostraremos 9 páginas, a menos que sea un número menor, tendremos la página actual +-4 páginas, a excepción de las 9 primeras y 9 últimas, para eso utilizamos num_page que es la página actual y num_pages que es el numero de paginas totales enviados desde el controlador.

JavaScript

var ini=0;
var fin=0;
var pages=[];

if(parseInt('{{num_page}}')<=5){
  ini=1;
  if(parseInt('{{num_pages}}')<9)
    fin=parseInt('{{num_pages}}');
  else
    fin=9;
}else if(parseInt('{{num_page}}')>=parseInt('{{num_pages}}')-4){
  if(parseInt('{{num_pages}}')<=9)
    ini=1;
  else
    ini=parseInt('{{num_pages}}')-9;
  fin=parseInt('{{num_pages}}');
}else{
  ini = parseInt('{{num_page}}')-4;
  fin = parseInt('{{num_page}}')+4;
}

Una vez que tenemos el inicio y el fin podemos añadir nuestros botones con ayuda de la librería jquery.

if (parseInt('{{num_page}}')>1){
  $('#paginas').append('
primera
');
  $('#paginas').append('
ant
');
}
for (var i = ini; i <= fin; i++) {
  $('#paginas').append('
'+i+'
');
}
if (parseInt('{{num_page}}')sgte');
  $('#paginas').append('
ultima
');
}

Agregamos un clase a la página activa para que resalte este botón.

$("#{{num_page}}").addClass("active");

Finalmente colocamos los estilos para crear nuestra barra de paginación:

CSS

.paginacion {
  margin: 20px 0;
}
.paginacion ul {
  list-style: none;
  text-align: center;
}
.paginacion ul li {
  display: inline-block;
  margin-right: 10px;
}
.paginacion ul li a {
  display: block;
  padding: 10px 20px;
  color: #fff;
  background: #024959;
  text-decoration: none;
}
.paginacion ul li a:hover {
  background: #037e8c;
}
.paginacion ul li .active {
  background: #037e8c;
  font-weight: bold;
}

Como resultado final obtenemos una barra de paginación como se muestra a continuación y además nuestros datos más ordenados y fáciles de acceder.

Pueden encontrar este ejemplo completo en mi repositorio de GitHub: https://github.com/CarlosPlasencia/paginacion

Espero que te haya gustado este tutorial y puedas utilizarlos para mejorar tus aplicaciones, no olvides compartir con sus amigos y dejarnos sus dudas y opiniones en la caja de comentarios. Muchas gracias, ¡Hasta la próxima!