Una tabla básica con jTable

jTable es un plugin de jQuery para el desarrollo de tablas de datos dinámicas en una página web, que conectándose con el servidor permitirá realizar acciones sobre los datos refrescando la tabla pero no el resto de la página y de una manera sencilla.

No debemos confundir este plugin de jQuery con JTable, un componente de Java Swing que permite crear tablas en un interfaz gráfica realizada en Java.

La página oficial del plugin donde puedes descargarla, encontrar ejemplos y su API es esta: jtable.org

jTable nos ofrece la lógica y el diseño asociado a la vista de la tabla, la lógica que realiza las operaciones de la base de datos debe implementarse en el servidor, pudiéndose hacer en cualquier lenguaje válido para ello, como son PHP, ASP.Net o Java. En este tutorial utilizaremos Servlets de Java.

Vamos a ver crear una tabla como la que vemos en la siguiente imagen:

Tabla creada con jTable

Tabla creada con jTable

Suponemos que tenemos en base de datos una tabla correspondiente con los mismo campos, y en la que están los valores que se ven, donde “Id” la clave principal y autoincrementable, por lo que, en este caso no tendremos que darle valor. Los otros tres campos con de tipo “Varchar”.

El caso que mostramos es el de una tabla paginada, por lo que se muestran los comandos bajo la tabla que permiten moverse entre las páginas y seleccionar el número de registros mostrados en la vista.

¿Qué necesitaremos para crear esta tabla?

  • Fichero correspondiente a la vista que incluya el código Javascript/jQuery. Puede ser JSP, HTML, velocity, …
  • Servlet donde reside la lógica que hará el papel de contolador. Recibirá las peticiones desde la vista y hará las llamadas a base de datos.
  • La lógica encargada de gestionar el acceso a base de datos, o sea, el modelo. Nos vendrá muy bien también tener un tipo de objeto que represente a los registros de la tabla.

La vista

En primer lugar es necesario descargar el plugin, el cual contendrá 3 carpetas: images, css y js. Tendremos que incluir estos ficheros en nuestra página para poder utilizar su funcionalidad.

En el documento html tendremos que asignar un sitio en el que se va a cargar la tabla:

<div id="PorpertiesTableContainer"></div>

En ese “div” cargaremos la tabla. A continuación podemos ver el script. En él hacemos referencia al servlet “propertiesservlet” al cual le envíamos un parámetro (“action”) para que realice una u otra operación y que se encargará de las operaciones en el servidor:

Cómo vemos, simplemente se declaran las 4 acciones necesarias y los campos con sus propiedades. En el campo ‘Id’ hemos puesto la propiedad ‘key’ a true, por lo que asume que no puede editarse y no aparecerá en el formulario de entrada. Con la opción “paging” a true indicamos que queremos que la tabla sea paginable.

En la llamada a jtable en la que incluimos todas sus propiedades declaramos la tabla. Al final añadimos la llamada a jtable('load') que es la que provoca que la tabla se cargue.

Lógica del servidor

Nos hará falta crear un servlet que conteste a las peticiones de la vista y haga las llamadas a la base de datos.

La comunicación con la vista se hace en formato JSON. jTable requiere que una respuesta correcta tenga este formato:

En caso de error la forma de informar a la vista es un mensaje con este formato:

Desde la vista se envían dos parámetros relativos a la paginación que debemos leer para realizar la consulta en base de datos correctamente. Son:

  • jtStartIndex: indica el número de página elegido por el usuario.
  • jtPageSize: indica el tamaño de la página seleccionado en el desplegable.

GestorBD será una clase estática con los métodos necesarios para operar con la base de datos. Para formar la cadena JSON utilizamos el la librería de Google Gson. PropertiesModel es una clase para encapsular los registros de la tabla.

Aquí sólo implementamos la parte correspondiente al listado, que sirve de ejemplo para implementar las demás acciones.

Acceso a base de datos

Por último hablamos del acceso a los datos. En este ejemplo hemos dispuesto que haya una clase con esta función específica que hemos llamado GestorBD que ofrece distintas operaciones que serán llamadas desde el servlet.

Para encapsular los datos de un registro necesitamos una clase que los represente, algo como esto:

 

Y la clase que realiza el acceso a datos que sería algo así:

En próximas lecciones veremos como sacar más funcionalidad a jTable.

One Comment

  1. Guaroa

    abril 5, 2017

    Muy buen ejemplo, gracias.

Deja un comentario