Crear tablas paginadas con jQuery

Tabla paginada con jQuery

En muchas situaciones, nos encontramos con tablas que tienen muchos registros, las cuales nos ocupan una altura muy considerable en nuestra página web. Para solventar este problema, podemos paginar nuestras tablas para ir mostrando registros progresivamente. En este tutorial vamos a ver cómo podemos crear tablas paginadas de una forma muy sencilla.

Para empezar, vamos a partir de una tabla que cuente con un número relativamente alto de registros.

Copy to Clipboard

Para acortar un poco el código, se han suprimido 27 registros y sustituido por los puntos suspensivos. 

Creando los controles de páginas

Según tenemos la tabla ahora mismo, nos mostraría 30 registros con una cabecera y ningún pie de tabla. Vamos centrarnos ahora en crear el pie de la tabla, el cual va a contener los controles para movernos entre las diferentes páginas de la tabla. Estos controles van a ser los siguientes:

  • Primera página: nos llevará siempre a la primera página.
  • Anterior página: como su propio nombre indica, nos mostrará la anterior página, o lo que es lo mismo, a la página actual menos otra página. Aunque parezca que no, este concepto es importante. Más adelante veremos por qué.
  • Indicador de página: nos mostrará en qué página nos encontramos actualmente.
  • Siguiente página: nos mostrará la siguiente página o la página actual más otra página.
  • Última página: nos llevará siempre a la última página.

Para movernos entre las páginas vamos a utilizar botones que al pulsarlos lanzarán un evento. Para mostrar el indicador de página simplemente rellenaremos la celda con el texto correspondiente. El código del pie de la tabla será el siguiente:

Copy to Clipboard

Con el pie de página ya preparado, lo único que nos queda será darle funcionalidad a los botones. Para ello vamos a crear un nuevo archivo de javascript y enlazarlo con nuestro html. Además, también vamos a utilizar un archivo css para aplicar un par de estilos sencillos: poner en negrita la cabecera de la tabla y crear una clase css que nos oculte las líneas de la tabla de las páginas en las que no nos encontremos. El archivo css va a quedar de la siguiente manera:

¿Necesitas una impresora?

En este enlace encontrarás una selección de las mejores impresoras actuales

Ir a MejoresImpresoras.com

Copy to Clipboard

Como hemos dicho anteriormente, vamos a crear un fichero javascript para darle funcionalidad a los botones de movimiento. Este archivo va a empezar de la siguiente forma:

Copy to Clipboard

Antes de empezar a rellenar la función ready, vamos a terminar de enlazar todos los ficheros en la cabecera del archivo html:

Copy to Clipboard

Definiendo variables para paginar la tabla

Ahora bien, con todos los ficheros de nuestro proyecto ya preparados y enlazados, empezamos con el archivo index.js y la funcionalidad de los botones. Lo primero que tendremos que hacer será plantearnos qué variables globales vamos a necesitar. En este caso serán tres:

  • resultados_por_pagina: va a almacenar un número entero el cual nos va a indicar cuántos registros se van a mostrar como máximo por página.
  • pagina_actual: va a almacenar un número entero que va a ir cambiando constantemente almacenando el número de la página actual.
  • pagina_ultima: va a almacenar un número entero que corresponde con el total de páginas de nuestra tabla, el cual coincide con el valor de la última página.

Vamos a crear estas 3 variables editando nuestro archivo index.js de la siguiente forma:

Copy to Clipboard

Es muy importante que definamos estas variables fuera de cualquier función, de esta forma estarán disponibles para todo el documento y podremos alterar su valor en cualquier función y que lo conserven.

Crear código óptimo

Como podemos ver, en este caso hemos decidido que vamos a tener 5 resultados por cada página como mínimo y que empiece a cargar por la página 1. La última página aún no la sabemos, ya que deberemos saber el total de registros y dividirlo entre el número de resultados por página. Este resultado puede ser un número decimal, el cual siempre redondeamos hacia arriba. ¿La razón? Vamos a suponer que en vez de 30 registros tenemos 31, entonces vamos a aplicar a división antes mencionada: 

número de páginas = total de registros / resultados por página

(sustituimos valores)

número de páginas = 31 / 5

número de páginas = 6,2

Lógicamente no es posible mostrar 6,2 páginas. Para solucionar esto, redondeamos el decimal y ya tendremos un número de páginas entero, en este caso el 7. Por ejemplo:

  • Página 1: registro 1, 2, 3, 4, 5
  • Página 2: registro 6, 7, 8, 9, 10
  • Página 3: registro 11, 12, 13, 14, 15
  • Página 4: registro 16, 17, 18, 19, 20
  • Página 5: registro 21, 22, 23, 24, 25
  • Página 6: registro 26, 27, 28, 29, 30
  • Página 7: registro 31

Una vez entendido cómo calculamos el número total de páginas, lo vamos a transcribir a lenguaje javascript.

Copy to Clipboard

En la variable “total_registros”, estamos almacenando el número total de registros contando todos los elementos “<tr></tr>” que hay en la tabla con id “tabla_paginada”. Después, estamos dividiendo el total de registros entre los resultados por página y pasándoselo como parámetro a la función “round” de la librería “Math”, la cual nos va a devolver el resultado de la división redondeado hacia arriba. Este resultado lo estamos almacenando en la variable “pagina_ultima” que también corresponde con el número total de páginas de la tabla.

Creando la función para cargar páginas

El siguiente paso va a ser crear una función a la cual le pasaremos como parámetro el número de página que queremos mostrar. Esta función ocultará y mostrará las filas que correspondan a la página requerida. La función se creará fuera del “ready” para poder reutilizarla a lo largo de todo el transcurso de la página, como con las variables globales.

Copy to Clipboard

La página que pasamos como parámetro siempre va a ser enviada por los botones de paginación (primera, anterior, siguiente y última) y además nunca pude ser menor de 1 (primera) ni mayor del total de páginas (última). Lo primero que haremos en la función será validar esas dos condiciones.

Copy to Clipboard

Como podemos ver en el código de arriba, si la página es menor que 1, se iguala a 1, y si la página es superior a la última página, se iguala a la última página.

Mostrando y ocultando registros

Una vez tenemos validados todos los límites de las páginas de la tabla, vamos a ocultar todos los registros para mostrar solamente los que nos interesan.

Copy to Clipboard

La línea que hemos añadido aplica a todos los “<tr></tr>” la clase css “linea-oculta” que hemos definido anteriormente en el archivo “index.css”, con esto conseguiremos ocultar todos los registros de la tabla. El siguiente paso va a ser mostrar los registros correspondientes a la página que queremos mostrar. Para ello, lo primero que tenemos que saber es el primer registro que hay que mostrar, que será el resultado del número de la página a mostrar y los registros por página. Partiendo de este índice, solamente nos quedaría contar todos los registros que quedan hasta el número de registros por página e ir eliminado la clase “linea-oculta”. Vamos a verlo con un ejemplo. Suponemos que tenemos 30 registros, vamos a mostrar 5 registros por página y queremos mostrar la página 3. Entonces, el primer registro será:

primer registro = pagina a mostrar * registros por página

desde (primer registro) hasta menor (primer registro + registros por página)

quitar clase “linea-oculta”

Vamos a ver cómo quedaría todo esto añadido a nuestra función “cargarPagina” y traducido a javascript.

Copy to Clipboard

Conceptos básicos sobre índices

Una cosa que hay que tener clara es que en programación, en la mayoría de los casos, el primer índice suele ser un 0. Si nos fijamos en la variable “primer_registro” podemos ver que a la página que queremos cargar le restamos una unidad y la multiplicamos por el número de resultados por página. Si queremos cargar la página 1 y le damos valores nos quedaría algo así:

primer registro = (1 – 1) * 5

primer registro = 0

El primer registro es el 0 ya que para recorrer los elementos “<tr></tr>” en DOM con la función “eq()”, el primer elemento es el 0. Entonces va a ir recorriendo registros desde el registro 0 hasta que sea menor que la suma del primer registro y los resultados por página. En este caso mostrará los “<tr></tr>” que correspondan con los índices 0, 1, 2, 3, y 4, un total de 5 registros.

Por último, solamente nos quedaría almacenar la página actual en la que estamos e indicar en qué página nos encontramos actualmente. Para ello, lo único que tenemos que hacer es modificar el contenido del “<tr></tr>” con id “indicador_paginas” y rellenar el html con el texto correspondiente.

Copy to Clipboard

En los siguientes enlaces puedes encontrar una demo de como funciona la tabla paginada y también la descarga del proyecto entero.

4.8 (96.4%) 50 votes

2020-10-09T09:27:35+00:00