Agregar datos extras en datatables

DataTables es de las mejores herramientas que existen para formatear tablas en la web, además de las funcionalidades de la tabla misma como la ordenación, ordenación múltiple, buscador integrado, paginador, y más funcionalidades; tiene soporte para extenciones (plugins) y uno de ellos es Buttons, que permite exportar la información de la tabla en CSV, hoja de cálculo, PDF, así como copiarla al portapapeles, e imprimirla; ahorrándonos mucho tiempo puesto que hace automáticamente todas estas acciones.

Son muchas las cosas que se pueden hacer y configurar en DataTables, mas adelante escribiré un tutorial de como utilizarlo y configurar varias de susextenciones para sacar el máximo provecho en nuestros proyectos.

El objetivo de esta publicación es solventar una de las mas grandes carencias de la herramienta. La información extra al momento de generar un archivo de hoja de cálculo (excel para los windowseros).

Actualmente, al momento de generar un archivo, vamos a simplicar llamándolo, de excel; dicho archivo, al abrirlo, contiene la información que se encuentra en la tabla desde donde exportamos el reporte.

Esto es extremadamente útil, pero puede perder contexto si no tenemos información extra, como puede ser el usuario que generó el reporte, la fecha, y algunos otros datos que podamos necesitar ahí mismo. Lo podemos colcoar en el nombre del archivo, pero es incómodo consultar esa información de esa manera, lo mejor sería que se agregara en el reporte mismo, junto con la información de las tablas.

Esto, actualmente se puede hacer al exportar a PDF, utilizando la directiva message, al momento de inicializar el script, así que tomando la misma estructura, he hecho algunos cambios al código, para que también funcionase al momento de exportar a excel.

En el archivo buttons.flash.js y buttons.html5.js se debe localizar la funcion

DataTable.ext.buttons.excelHtml5 = {

ó

DataTable.ext.buttons.excelFlash = $.extend({}, flashButton, {

Dependiendo del archivo, ya que se puede realizar la exportación a excel desde html5 o desde flash. En la inicialización se puede dejar que datatables detecte la compatibilidad del navegador y utilice uno o el otro.

Una vez identificado en donde está la función de exportar a excel, se procede a buscar la linea que contenga lo siguiente:

if (config.header) {

Y antes de esa línea, se adiciona el siguiente código:

//Angelos
if (config.message) {
var line = config.message.split('\n');
var tab = [];
for (var i in line) {
tab = line[i].split('\t');
xml += addRow( tab );
};
}

Se guardan los archivos, y ahora desde el archivo donde estamos inicilizando la tabla y agregando el soporte de botones de reporte, se adiciona a la configuración, la información extra en el parámetro message:

{
extend: ‘excel’,
text: ‘Hoja de calculo’,
message: ‘prueba1 \t prueba2 \t prueba 3 \t prueba 4 \n prueba 5 \t prueba 6’
},

Como se denota, además del mensaje que queremos que se adicione en el archivo de excel, podemos indicar si queremos que se coloque información en la siguiente columna, o en la siguiente fila.

\t: Sirve para indicar que se pase a la siguiente celda a la derecha. Esto nos ayuda a separar la información horizontalmente.

\n: Sirve para indicar que se pase a la siguiente fila en la parte inferior. Esto nos ayuda a separar la información verticalmente.

Al generar el reporte podremos ver algo como esto:

Donde podemos observar que los textos prueba1 a prueba 4, están en celdas contiguas horizontalmente, y prueba 5 y prueba 6, también lo están, pero en una nueva fila.

Debajo de las mismas se coloca el contenido del reporte que se está exportando.

En los días siguientes prepararé una publicación donde se vea como inicializar y configurar DataTables junto con varias extenciones útiles.