El plugin DataTables (IX). Preeditando datos.

Facebooktwittergoogle_pluslinkedinmailFacebooktwittergoogle_pluslinkedinmail

datatablesEn este artículo vamos a centrarnos en una operativa que resulta, en muchos casos, imprescindible. Se trata de modificar el script secundario para que, el resultado devuelto, incluya ciertos contenidos que, en principio, no están en la base de datos, pero que se basan en los que sí están. A ver, para entendernos. En un artículo anterior de esta serie aprendimos a modificar, en el script secundario, la fecha de ingreso, ya que, en la base de datos, se encuentra en formato aaaa-mm-dd (ISO 8601), que es el habitual para manejo interno, y debíamos obtenerla en formato dd-mm-aaaa, para que fuera legible para el usuario. En aquel momento ya nos estábamos asomando a un preprocesado de los datos antes de retornarlos al plugin DataTables del script primario. En este artículo vamos a ir un poco más allá, para seguir aprendiendo cosas que podemos hacer con este plugin.

PRERREQUISITOS

Esta vez necesitaremos contar, además de las herramientas que hemos venido usando (jQuery, jQuery UI y bootstrap) el juego de iconos de font awesome. Se trata de una colección de iconos muy práctica, que podemos incluir en nuestros diseños web. Si no estás familiarizado con font awesome, te recomiendo echar un vistazo a su web oficial (por cierto, son iconos de uso libre y gratuito). Nosotros cargaremos la biblioteca de iconos mediante CDN, por comodidad. La URL del CDN es https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css. Por supuesto, si lo deseas, en tu proyecto puedes descargar la biblioteca e integrarla, pero en este caso no lo haremos.

LO QUE VAMOS A HACER

Eso es lo primero de todo, claro: determinar lo que vamos a hacer. En este ejemplo vamos a añadir una columna más a la tabla, a la que llamaremos Operaciones. En cada fila, esta última casilla tendrá tres iconos para enviar un correo electrónico a la persona de esa fila, eliminarla de la lista, o ponerla una marca especial. Las operativas de estas funciones no las vamos a implementar. Por una parte, en la base de datos no tenemos correos para enviar emails, ni vamos a andar borrando o modificando datos. Lo único que queremos es ver como podemos usar DataTables para crear estos iconos y enlazarlos a funciones JavaScript que neceitemos. Luego ya sería, llegado el caso, cuestión de establecer lo que harían esas funciones.

La tabla quedará con un aspecto similar al que ves a continuación (fíjate especialmente en la columna de la derecha).

tabla_con_operaciones

EL SCRIPT PRIMARIO

Este script sufre algunas modificaciones necesarias. Vemos el listado en articulo_09.php:

En primer lugar vemos, en la línea 14, que hemos cargado el CDN de Font Awesome, para contar con los iconos necesarios:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

En la línea 28 vemos que le hemos añadido una cabecera más a la tabla HTML, para la última columna de la derecha:

<th>OPERACIONES</th>

En la línea 84 hemos añadido al objeto DataTables la definición de estaa última columna, con indicación expresa de ue no será ordenable, ya que solo contendrá iconos, y no tiene ningún sentido que lo sea:

{"data": 6, 'orderable' : false}

Por último, hemos incluido una pequeña función JavaScript que nos servirá para comprobar, cuando pulsemos los iconos de la columna de la derecha, comprobar que se reconoce la pulsación y que, en base a esta, podríamos programar las funcionalidades requeridas. Líneas de la 90 a la 93:

function operaciones(id, op){
    var mensaje = "El id es " + id + ", y la operación es " + op;
    alert (mensaje);
}

EL SCRIPT SECUNDARIO

Este script también sufre algunas modificaciones. El listado completo es datos_externos_09.php:

Cómo los iconos van a actuar sobre el registro de la persona a cuya derecha aparecen, debemos conocer el id de cada registro de la tabla. Así, en la línea 33 hemos añadido que se lea este campo:

$tablasDeBBDD[0].'.id'

Sin embargo, no queremos que en la columna en la tabla aparezca el id, sino un contenido que se diseñará en base a este id. En las líneas 133 a 143 hemos modificado el contenido para la última columna, que es el id del registro:

Cómo ves, hemos usado referencias a los iconos de Font Awesome, para que luego, en la tabla renderizada por el script primario, se muestren estos. Hemos creado, en base a estos iconos, unos enlaces que llaman a la función JavaScript que habíamos preparado al respecto. La pasan, como argumentos, el id del registro y el nombre de la operación a realizar.

Una vez construida la cadena con los enlaces, sustituimos el contenido original de la columna donde se alojaba el id del registro por la cadena que hemos creado.

Carga el script primario en tu página y verás como, según el icono que pulses, la función JavaScript te muestra los datos de id del registro y operación elegida en cada caso.

Los scripts y la base de datos te los puedes bajar de este enlace.

     

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *