El plugin DataTables (XIII). Optimizando datos.

Facebooktwittergoogle_pluslinkedinmailFacebooktwittergoogle_pluslinkedinmail

datatablesEste artículo es muy sencillo. Vamos a ver una forma alternativa de reconocer los campos retornados por el script secundario. Además, vamos a ver como, en la tabla HTML, se pueden seleccionar y deseleccionar uno o más registros. En general, vamos a ver algunas mejoras que podemos aplicar al uso de DataTables.

Ninguno de los conceptos que vamos a exponer aquí cambian o invalidan nada de lo que hemos visto hasta ahora. Sin embargo, en una serie posterior de artículos veremos que nos aportan cierta comodidad y flexibilidad. Por eso los exponemos aquí, para tener ya una referencia, aunque, de momento, lo que vamos a ver parezca no aportar nada especial. Aún así, vale la pena para, que llegado el momento, tengamos estas características de DataTables como referencia, ya que las necesitaremos.

EL ESCENARIO

Para este artículo vamos a volver a usar la base de datos con las tablas de personal de la multinacional que hemos usado en algunos artículos anteriores. Para ello, te la dejo aquí para descargar aunque, probablemente, la tengas ya, si has seguido estos manuales. Es la misma que usamos en el sexto artículo de esta serie, y los resultados van a ser similares.

EL SCRIPT PRIMARIO

Vamos a empezar viendo el script primario de este ejercicio, al que hemos llamado articulo_13.php:

Observa que hay dos grupos de líneas resaltadas. En primer lugar encontramos las líneas de la 46 a la 52, dentro de la sección de opciones que corresponden a los textos a mostrar en el idioma elegido (grupo de opciones language). Con lo que hemos añadido lograremos que nos salgan unos mensajes específicos, en la parte inferior de la tabla, cuando seleccionemos uno o más registros. Los registros se seleccionan haciendo clic sobre ellos. Verás que quedan resaltados. Si quieres seleccionar más de uno, debes usar las teclas Shift o Ctrl. Observa que tenemos textos definidos para cuando no haya ningún registro seleccionado (0), cuando haya un registro seleccionado (1) o cuando haya varios (_).

Sin embargo, en el comportamiento por defecto de DataTables, no pueden seleccionarse registros específicos. Es necesario añadir, a la configuración, la opción select, con el valor true, como vemos en la línea 87:

select: true

En cuanto a la razón por la que seleccionamos los registros, y lo que podemos hacer con dicha selección, eso es un tema que discutiremos en un artículo posterior.

Por último, observa la definición de las columnas, entre las líneas 79 y 86:

"columns" : [
    {"data": 'nombre'},
    {"data": 'apellido'},
    {"data": 'cargo'},
    {"data": 'ciudad'},
    {"data": 'fecha_de_ingreso'},
    {"data": 'salario_bruto_anual'}
],

Cómo ves, en lugar de referenciarlas mediante su índice, las hemos referenciado mediante unas claves asociativas, que se corresponden con los nombres de las columnas de la tabla MySQL, según las recupera para el dataset el script secundario. Esta forma de referenciar las columnas viene bien por cuestiones de legibilidad del código pero, además, nos aportará una facilidad especial para algo de lo que hablaremos en un artículo posterior.

EL SCRIPT SECUNDARIO

Este script lo vamos a reproducir aquí, para que lo tengas a mano y porque presenta una pequeña modificación con respecto a la forma en que los hemos hecho hasta ahora. Se llama datos_externos_13.php:

La única diferencia está en la línea 150 (la que aparece resaltada):

foreach ($DL as $keyDato=>$dato) $registro[$keyDato] = $dato;

Hasta ahora, en anteriores artículos, no habíamos usado la variables $keyDato, con lo que esta línea quedaba así:

foreach ($DL as $dato) $registro[] = $dato;

Esta modificación es la que hace que en el JSON de retorno vayan también las claves asociativas, lo que permite la forma en que hemos definido las columnas en el script primario. De otro modo, no funcionaría el código.

Pruébalo para ver como opera.

FORMATEADO DE DATOS

A lo largo de los artículos de esta serie hemos aprendido a hacer que el script secundario haga un preformateado de ciertos datos antes de enviarlos por JSON al script primario, de modo que, cuando se renderiza la tabla, estos datos ya vienen preformateados, y aparecen correctamente. Hay un conjunto de líneas de código del script secundario que se ocupan de esto y que, sin duda, te suenan familiares, por haberlas visto en varios de estos artículos:

foreach ($DataSet as $keyDL=>$DL){
    $DataSet[$keyDL]['fecha_de_ingreso'] = date("d-m-Y", strtotime($DL['fecha_de_ingreso']));
    $DataSet[$keyDL]['salario_bruto_anual'] = number_format($DL['salario_bruto_anual'], 2, ",", ".").' €';
}

Sin embargo, esta no es siempre la mejor solución. Por ejemplo, para las fechas está muy bien, pero para el salario (y otros datos numéricos que pudiera haber), hay ocaciones en que es conveniente (ya lo veremos en su momento) que el dato pase al script primario “en bruto”, es decir, tal cómo se ha recuperado de la base de datos. Será el script primario el que deba darle un formato adecuado para mostrar, antes de renderizar en la tabla, de forma que se nos muestre con el formato deseado pero, internamente, se conserve el dato original.

Además, en el caso de los salarios, en estos ejemplos que estamos usando, nos interesa, por cuestiones estéticas y de comodidad de visualización, que aparezcan alineados a la derecha de la columna, en lugar de a la izquierda, como aparecen por defecto.

Vamos a aprender a solucionar ambos problemas.

EL SCRIPT SECUNDARIO

Vamos a empezar por este, ya que es el que menos modificaciones sufre. Se llama datos_externos_13_b.php:

Cómo ves en las líneas resaltadas, lo único que hemos hecho ha sido quitar el preformateado del salario, para que se retorne el valor original. Este script no presenta más novedades.

EL SCRIPT PRIMARIO

Este si presenta varias novedades. Se llama articulo_13_b.php, y te dejo aquí el listado, antes de comentar los detalles:

En la línea 25 vemos que a la cabecera del salario le hemos dado un identificador. Esto es porque, más adelante en el código, alineamos los datos de esta columna a la derecha, y DataTables alínea TODA la columna, incluida la cabecera. Mediante el identificador podremos luego realinear el título de la columna a la izquierda.

En la línea 85 vemos que a la columna que nos interesa le hemos añadido la clase text-right (de bootstrap) que alínea los contenidos a la derecha. Lo hacemos con la opción className.

En las líneas 87 a 94 usamos la opción columnDefs, que ya hemos usado en otros ejercicios para otras funciones. Aqui la vamos a usar para darle a los salarios el formato adecuado antes de renderizar, de modo que en la tabla HTML aparezcan en el formato correcto. Recuerda que en el script secundario se entrega este dato “en bruto”, sin ningún formato.

La opción targets apunta a la columna 5, que, si miras las definiciones de columns veras que es la del salario. Por lo tanto, estamos indicando la columna sobre la que vamos a operar.

La opción renders permite establecer una función que define la forma en que se renderiza el dato de la columna indicada (parámetro data). Cómo JavaScript, al contrario que PHP, no posee una función nativa para dar formato a los números, hemos creado una función específica para este contexto. Se llama salaryFormat() y está definida entre las líneas 102 y 116. Es una función muy sencillita, creada a mano, para obtener el formato correcto.

En la línea 99 vemos cómo le quitamos la alineación derecha a la cabecera de la columna de salarios.

El resultado de todo esto lo vemos a continuación:

Aquí puedes descargarte los scripts y la base de datos de este artículo, pulsando en este enlace.

     

Un comentario:

  1. Pingback: El editor de DataTables (II) – El desván de Jose

Deja un comentario

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