Hoy voy a escribir sobre otra librería de Javascript para jQuery que usé para implementar el nuevo catálogo de plantillas de 3sellers. La librería se llama Pageless y nos permite automatizar el proceso de paginación. La paginación normalmente usamos si tenemos un listado de productos o artículos y no queremos cargar todos los elementos de este listado de golpe. El patrón de diseño más usado en estos casos es lo típico de mostrar una barra de números para cada página de resultados, tipo Google.

Pageless nos permite deshacernos de esta barra, y simplemente cargar los siguientes elementos cuando el usuario haya llegado al final de nuestra página. Lógicamente no podemos usar este tipo de navegación en cualquier web. Si no ofrecemos otras herramientas como filtros o ordenación puede resultar agobiante para un usuario usar Pageless. Imagínate por ejemplo un listado largo de artículos de un blog, mostrando primero los artículos más recientes. El usuario sabe que el artículo que quiere ver es uno de los primeros que se escribieron y por lo tanto tiene que estar en una de las últimas páginas. Con una paginación normal simplemente pincharía en el número de una de las últimas páginas. Con Pageless y sin filtros o ordenación tendría que mover la página hacía abajo hasta llegar al artículo deseado.

Dicho esto, en el catálogo de plantillas sí que tenemos varios filtros y la posibilidad de ordenar las plantillas por nombre o fecha de creación, así que me pareció una forma elegante de implementar la paginación. Veamos como se hace:

En la demostración de este artículo podemos ver un uso simple de Pageless. En el fondo, Pageless simplemente entra en acción cuando el usuario mueva la página. En este momento mide la distancia entre el elemento HTML que le hemos pasado y el borde inferior de la ventana del navegador. Si están muy cercas, lanza la llamada AJAX al servidor a una ruta que tenemos que especificar nosotros y carga los siguientes artículos, incrementando automáticamente el parámetro 'page' (para que nuestro servidor sepa en que página virtual nos encontramos). Luego inserta los nuevos elementos en nuestra página.

Para usar Pageless tenemos que incluir primero la librería jQuery y el fichero de Javascript de Pageless.


$("#listado").pageless({
  totalPages: 6,
  currentPage: 1,
  params: {layout: 'false'},
  url: "/page/demo_20100528_henning",
  loaderImage: "/live/images/loader2.gif"
});

Arriba podemos ver el código necesario para iniciar Pageless. Primero buscamos el contenedor que contiene los elementos que queremos mostrar (en este caso un DIV con ID 'listado'). Sobre este contenedor llamamos al método de pageless y le pasamos los siguientes parámetros:

  • totalPages: El número total de páginas que tenemos.
  • currentPage: El número de la página que ya está viendo el usuario. Normalmente ponemos 1 aquí, porque representa la primera página que ve el usuario al entrar.
  • params: Con params podemos especificar parámetros adicionales para enviar al servidor con las llamadas AJAX a parte del parámetro 'page' que incluye Pageless automáticamente
  • url: La URL de donde cargamos los elementos
  • loaderImage: Una ruta a una imagen que mostramos mientras cargamos los nuevos elementos.

Con esto ya tenemos Pageless funcionando. El único problema que he encontrado es que si los elementos de la primera página caben completamente en la ventana del navegador, y por lo tanto el usuario no puede mover la página, Pageless nunca lanza la llamada para las demás páginas. Para asegurarnos que no pase esto, simplemente podemos añadir al final del código de arriba la siguiente linea:


$.pageless.scroll();

Con esta linea forzamos que Pageless mida la distancia entre contenedor y borde inferior de la ventana del navegador, y si es necesario, que cargue mas elementos.

Un apunte final: Si vuestro servidor, tal como el nuestro, no entiende el parámetro 'page' para indicar la página de elementos que queremos cargar, es muy fácil cambiar el código de Pageless para usar un parámetro con otro nombre. Simplemente hay que cambiar en la linea 134 de la librería la parte de {page: $.pageless.settings.currentPage} a {pagina: $.pageless.settings.currentPage} o lo que necesite vuestro servidor.