Crear un paginador utilizando JSTL Core

2
14407

Crear un paginador utilizando JSTL Core.

0. Índice de contenidos.


1. Introducción

Existen infinidad de aplicaciones en las que el usuario consulta datos y el sistema se los devuelve (el buscador de google sin ir más lejos). Normalmente, lo que hacen las aplicaciones no es devolver todos los resultados que cumplen con los criterios de filtrado, sino devolver los resultados en páginas.
El motivo de devolver los resultados en páginas es, principalmente, la eficiencia. No es lo mismo hacer una consulta a la base de datos que devuelva 3000 resultados, que devolver los 10 primeros, o los elementos del 180 al 190.

En este tutorial vamos a ver cómo implementar nuestro propio paginador de resultados de consultas utilizando el taglib JSTL Core, el núcleo de la librería de etiquetas standard para JSP.


2. Entorno.

El tutorial está escrito usando el siguiente entorno:

  • Hardware: Portátil MacBook Pro 15′ (2.2 Ghz Intel Core I7, 4GB DDR3).
  • Sistema Operativo: Mac OS Snow Leopard 10.6.7
  • Entorno de desarrollo: Eclipse 3.6.2.
  • Apache Tomcat 6.0.32 con jdk 1.6.
  • Navegador: Mozilla Firefox 4.0.1


3. Nuestro ejemplo.

Nuestro ejemplo consistirá en una pantalla para consultar datos, en concreto nombres de ciudades (por ejemplo…).
El sistema devolverá la cantidad total (un número) de todas las ciudades que tiene almacenadas y los resultados en páginas. Lo que es lo mismo, si hubiese un tamaño de página fijo de, por ejemplo 10 elementos, la primera página devolvería los 10 primeros resultados, la segunda página los elementos del 11 al 20, la tercera del 21 al 30, etc…


4. El controlador.

En nuestro ejemplo, el controlador será el encargado de recibir y tramitar las peticiones de consulta por parte de los usuarios.

Para ello hemos creado un Servlet (también valdría un Action de Struts o un Controller de Spring, etc…) que recibe un único parámetro. Este parámetro será el offset, o lo que es lo mismo, el desplazamiento con el que tiene que devolver los resultados que va a consultar.

El elemento offset combinado con el máximo de elementos por página conformarán cada una de las páginas.

Por ejemplo, si el offset es 0 y el máximo número de elementos por página es 10, significa que el usuario quiere que se le devuelvan los elementos del 1 al 10. Si el offset es 2 y el máximo de elementos por página 10, significa que el usuario está pidiendo los resultados del 21 al 30. Un truco, el primer elemento a devolver sería: offset * máximo número de elementos por página + 1.

En nuestro ejemplo, el offset podría interpretarse como el número de página (la primera página sería la 0).

Por tanto, cada vez que nuestro controlador reciba una petición hará dos cosas: obtener el número total de elementos y obtener los elementos relativos al offset que recibe (o lo que es lo mismo, devuelve la página solicitada).

El servlet quedaría de la siguiente manera:


5. La pantalla de consulta.

En nuestro caso, la pantalla de consulta será una jsp que «pintará» los resultados devueltos por el controlador y que pasará al paginador la información (parámetros) necesaria para que funcione correctamente.

Quedaría de la siguiente manera:

Observamos que la jsp «pinta» en una tabla los resultados de la consulta. Posteriormente, incluye la jsp del paginador, a la que le pasa 4 parámetros que necesitará para funcionar correctamente:

  • maxElements: lo obtiene de la request (ver servlet). Indica el máximo número de elementos que tiene cada página.
  • totalElements: lo obtiene de la request (ver servlet). Indica el número total de elementos encontrados (¡no el número de elementos de la página!).
  • offset: lo obtiene de la request (ver servlet). La página actual.
  • maxPagesDisplayed: valor constante. Indica el máximo número de accesos rápidos a páginas que tendrá el paginador.

Como se puede observar, al final hay una función javascript, a la que invocará el paginador para cambiar de página. Envía un formulario con el offset al servidor.


6. El paginador.

El paginador nos permitirá navegar a través de los resultados de consulta enviando peticiones al servidor para que éste devuelva páginas. Lo hemos implementado en una jsp (paginador.jsp) para que pueda ser tratado como un componente independiente, reutilizable en otras páginas de consulta.

Las características que deberá tener nuestro paginador serán las siguientes:

  • Debe mostrar la cantidad total de elementos encontrados (el número, no los elementos).
  • Debe indicar qué elementos se están mostrando.
  • Debe proporcionar un acceso rápido a un número determinado de páginas. En nuestro ejemplo a 6 páginas más la actual (total 7).
  • En caso de que el número total de páginas sea superior a 7 (ej. 250 resultados a 10 resultados por página serían 25 páginas), debe proporcionar un acceso rápido a la página anterior (a las 7 mostradas), a la siguiente, al inicio y a la última.

El código sería este:

Aquí se puede ver cómo quedaría:


7. Referencias.


8. Conclusiones.

En este tutorial hemos visto la importancia de realizar búsquedas páginadas para mejorar la eficiencia. El paginador es un componente fundamental en esta tarea.

Hemos propuesto la solución de implementar nuestro propio paginador con la ayuda de la librería de etiquetas JSTL Core en una jsp. Además, esta jsp la podemos utilizar en cualquier página de consultas.

Por último, me gustaría añadir que esta es solo una solución más para resolver el problema de la paginación, pero existen otras soluciones. Os invito a que investiguéis sobre el taglib display tag, que también nos ofrece un mecanismo de paginación. Seguro que os interesa.

Espero que este tutorial os haya sido de ayuda. Un saludo.

Miguel Arlandy

marlandy@autentia.com

2 Comentarios

  1. Hola Miguel, he usado tu codigo para crear una paginacion y no me salen todos los enlaces de las paginas.
    ¿Está el codigo completo de la jsp?

    Un saludo.

  2. Hola gracias por el ejemplo estimado puedes ayudarme en lo siguiente

    de esta forma estoy mostrando la clave en la base de datos

    Password:

    el problema es que la tengo encriptada en la base y estoytratando de hacer algo asi

    Password:

    no logro hacer que funcione podrias ayudarme?

    en la actualizacion tambien tengo el mismo problema

    <sql:param value='’ />

Dejar respuesta

Please enter your comment!
Please enter your name here