El plugin DataTables (IV). Mejorando el aspecto.

Facebooktwittergoogle_pluslinkedinmailFacebooktwittergoogle_pluslinkedinmail

datatablesHasta ahora hemos usado el plugin viendo unas pocas opciones de configuración. En este artículo veremos muchas más opciones para configurar el plugin DataTables, de modo que podamos mejorar mucho el resultado final. Veremos cómo mejorar el aspecto de nuestra tabla, poner los mensajes en castellano, establecer que columnas de la tabla admiten ordenación y cuales no, y muchas más cosas. A partir de este artículo empezamos a prepararnos para conseguir un resultado auténticamente profesional con el mínimo esfuerzo, y de una forma clara y directa.

Esto nos abrirá el paso para luego seguir avanzando y mejorando los resultados. Así, veremos que, con el plugin DataTables, lo que antes llevaba tres días de trabajo se puede hacer en media hora, y de una forma mucho más elegante robusta y fiable.

ESTABLECIENDO MÁS OPCIONES

La lista de opciones que se le pueden configurar a este plugin es, practicamente, interminable. No sólo porque, ya de por sí, hay una gran cantidad de ellas, sino porque, además, el fabricante sigue añadiendo algunas nuevas de vez en cuando. En esta serie de artículos no vamos a verlas todas. Prácticamente necesitaríamos una enciclopedia sólo para eso. Sin embargo, si veremos (en este artículo y los siguientes) las más relevantes, que nos resolverán nuestras necesidades en el 99.99% de los casos. Seguramente, no se te de nunca un caso en el que necesites algo que no vayamos a ver aquí.

Vamos a empezar reproduciendo el código de ejemplo de este artículo, así como el script auxiliar que proporciona los datos, para que lo tengas a mano y puedas comprobar su funcionamiento. Después, entraremos a explicar en detalle cómo funciona.

El código principal se llama articulo_04.php y su listado es el siguiente:

El script auxiliar que entrega los datos en JSON para ser mostrados en la página se llama datos_externos_04.php, y responde al siguiente listado:

Lo primero de todo, antes de empezar a comentar nada, pruebalo, para que veas cómo opera. Carga en tu navegador la dirección http://localhost/datatables/articulo_04.php y verás, de arranque, una página similar a la siguiente:

datatables_articuo_04

COMO FUNCIONA

Para entender cómo funciona este ejemplo debemos observar las caracetrísticas de ambos scripts: por un lado, el que podríamos llamar “principal”, que es articulo_04.php. Es el que monta el plugin, pide los datos y renderiza la tabla en el navegador. Por el otro, el que podríamos considerar “auxiliar”, (datos_externos_04.php) que es el que tiene los datos y se los devuelve al plugin cuando este los solicita.

Aquí vamos a ver las características de ambos.

EL SCRIPT SECUNDARIO

Vamos a empezar por este por ser el que menos diferencias y particularidades ofrece en este ejemplo. Lo primero que vemos es algo que usaremos ya siempre de aquí en adelante:

mb_internal_encoding ('UTF-8');

Debemos asegurarnos que los datos se procesen internamente con codificación UTF-8. Esto es necesario para evitar problemas que puedan surgir en caso de que los datos contengan apóstrofes, letras acentuadas u otros caracteres “conflictivos”. Puedes obtener más información en este enlace.

También vemos que la matriz de datos ya no se engloba bajo la clave aData, cómo en el artículo anterior, sino bajo aaData. Cuando usamos una operativa del plugin más compleja, que maneja determinadas opciones, debemos usar aaData para englobar la matriz de datos retornados, o no podremos leerlos correctamente. En lo sucesivo usaremos esta clave.

EL SCRIPT PRIMARIO

Como hemos visto, en el script secundario hay pocas peculiaridades. El script primario es otra cosa. Cómo ves en la implementación del plugin DataTables, hay un objeto JavaScript que es el que permitwe definir las opciones que se pasarán al plugin para su funcionamiento. La notación de opciones y valores de las mismas, con carácter general, es familiar a cualquiera que haya usado alguna vez un plugin jQuery (es decir, el 99.99% de los desarrolladores). Las opciones que usamos en este plugin son, a grandes rasgos, las siguientes:

  • language. Contiene las cadenas de texto que el plugin inserta en la tabla, y que sustituyen a las originales en inglés. En este ejemplo hemos usado cadenas en español, por lo que es en este idioma cómo se renderizan los resultados. Podríamos haber usado, incluso, variables con contenido dinámico, si tenemos distintos idiomas para nuestra web.
  • lengthMenu. Nos define las opciones de número de resultados que queremos ver. Cómo ves, recibe dos matrices. La primera con los números de opciones y la segunda con el literal que aparecerá en el combo. Al definir esta opción, el último elemento debería ser siempre -1, que se corresponde con el literal Todos, o Ver todos, o el que prefieras. Como ves, ambas matrices (la de valores y la de literales) tienen el mismo número de elementos, para que se correspondan 1 a 1.
  • iDisplayLength. Esta opción se complementa con la anterior, para indicar cual será la opción seleccionada por defecto cuando se cargue la página.
  • bJQueryUI. Permite indicar si queremos que el plugin monte algún comportamiento de jQueryUI. Esto es delicado. En este ejemplo hemos usado bootstrap para lograr una tabla con una apariencia más cuidada (si ves el HTML comprobarás que la tabla hace uso de clases de bootstrap). En el caso del plugin DataTables, el uso conjunto de bootstrap y jQueryUI origina conflictos que pueden hacer que algo no funcione bien. Por lo tanto, siempre que nuestra página emplee bootstrap, el jQueryUI debe estar desactivado (valor false).
  • ajax. Indica el nombre del script que proporciona por ajax los datos que el plugin debe mostrar en la tabla.
  • columns. Se referencian las columnas, númerándolas según el orden en que se mostrarán (la 0 corresponde a la primera por la izquierda). Se especifica que cada una de ellas es una columna de datos (data). En artículos posteriores veremos otras opciones para esto. También podemos indicar que una columna en concreto (o más de una, si es el caso) no debe ser ordenable ('orderable':false) o las búsquedas que se introduzcan en la caja de la parte superior derecha no deben buscarse en los datos de esa columna ('searchable':false). Si no especificamos esto, todas las columnas, por defecto, son ordenables y en todas se puede buscar. En otros artículos posteriores veremos que esta es una herramienta más potente y flexible de lo que vemos ahora, ya que a las columnas se les pueden cambiar las propiedades dinámicamente.

El plugin tiene muchas más opciones, pero, de momento, ya nos vale para irle cogiendo el truquillo a esto.

También quiero llamar tu atención sobre el hecho de que, en este ejemplo, al asignarle el plugin DataTables a la tabla definida en HTML, lo hemos hecho extendiéndo esta tabla en un objeto jQuery al que hemos llamado objetoDataTables_miembros. La definición nos queda así:

var objetoDataTables_miembros = $('#tabla_de_miembros').DataTable({

En este ejemplo, esto no es necesario pero, cómo le sacaremos mucho partido en otros artículos, nos vamos a ir acostumbrando, desde ya, a extender nuestros objetos DataTables en jQuery.

Para terminar, usamos dos comandos de jQuery para asignarle clases de bootstrap a las label de los campos de la parte superior, así cómo a los propios campos, como ves a continuación:

$('label').addClass('form-inline');
$('select, input[type="search"]').addClass('form-control input-sm');

Los scripts de este artículo puedes descargarlos en este enlace.

     

4 comentarios:

  1. Hola, buenos dias. Quisera saber como actualizas un datatable luego de ingresar un registro. Si tengo un modal y guardo un registro, como actualizo automaticamente en el datatable, el ultimo registro ingresado. Gracias.

    • Hola, Alexander:
      Cuando actualizas el contenido de tu base de datos (ya sea insertando, modificando o eliminando un registro) lo que tienes que hacer es redibujar la tabla.
      La forma de hacer que esto se lleve a cabo de forma automática es usar el método draw() del objeto datatables que hayas creado. Sería algo así como ObjetoMiTabla.draw();. Esta instrucción debe ser parte del código que empleas, por ejemplo, para el modal. Si la actualización la haces por ajax (que es como suele hacerse) como respuesta del ajax (complete:function) deberías llevar a cabo dos acciones: una que cierre el modal, y otra que redibuje la tabla como te he comentado.

      Es posible (dependiendo de la operativa que hayas empleado en tu modal de inserción de registros) que estas instrucciones se lleven a cabo “a destiempo” (normalmente, antes de lo que deberían), con lo que la tabla se redibujaría antes de que el nuevo registro se haya grabado, lo que haría que no te saliera el nuevo registro. Si es ese tu caso, pon el ajax como síncrono, en lugar de asíncrono (usando async:false). Según las especificaciones del W3C este uso está desaconsejado pero, en muchas ocasiones, no nos queda más remedio que recurrir a él.

      Si quieres echar un vistazo más detallado al método draw(), te sugiero esta URL: https://datatables.net/reference/api/draw().

      Espero haber despejado tus dudas. Muchas gracias por escribir.

      Un cordial saludo.

  2. Hola Jose, una consulta ,tengo un datatable mostrado mediante ajax con el atributo “columns: ” [] , al final de cada fila coloco un boton llamado edit, como podria hacer que al apretar el boton, mi fila pueda ser editada , que se activen los campos para modificarlo?

Deja un comentario

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