En el artículo anterior vimos un ejemplo de uso de DataTables. Es tosco, rudimentario y muy limitado, pero nos aporta una primera visión de “por dónde van los tiros”. En este artículo vamos a sacarle mucho más partido al plugin, configurándolo según nuestro diseño, y viendo cómo obtener unos resultados más flexibles. Aprenderemos algunas de las muchas opciones de configuración que tiene el plugin, y empezaremos a atisbar lo que podemos hacer o, mejor dicho, lo que esta herramienta puede hacer por nosotros.

Veremos que se le pueden pasar opciones de configuración en formato de objeto de JavaScript, y que los datos pueden obtenerse, mediante Ajax, de un script externo. Eso le brinda una potencia increible a DataTables, como veremos en este artículo.

INTRODUCIENDO OPCIONES

Una de las caracterísiticas que más flexibilidad y potencia le da a este plugin es que podemos declarar el método DataTable() con un objeto que contenga opciones, de modo que cambiarán su comportamiento. Tomemos, por ejemplo, el código del artículo anterior y modifiquemos la declaración del método DataTable() al aplicarlo a la tabla de miembros de nuestro club. Si recuerdas, era una sóla línea:

$('#tabla_de_miembros').DataTable();

Ahora vamos a sustituir esa única línea por las siguientes:

$('#tabla_de_miembros').DataTable({
    'paging':      false,
    'ordering':    false,
    'info':        false,
    'searching':   false
});

Con esto le estamos diciendo al plugin que no muestre una serie de características  (aquellas a las que les estamos pasando el valor false).

• Le decimos que no queremos paginación (paging). Con esto se logra que la tabla renderice todos los resultados en una página.
• También le desactivamos la ordenación (ordering). Esto hace que los miembros no aparezcan ordenados por un campo concreto, cómo ocurría en el ejemplo del artículo anterior, sino que aparecen cómo están en el HTML. Además, no tenemos la posibilidad de reordenarlos pulsando en los títulos de columnas de la cabecera de la tabla.
• La opción info nos permite desarctivar la información sobre el número de registros que en el artículo anterior veíamos en la parte inferior izquierda.
• La opción searching, al estar desactivada, no nos muestra la caja de texto de la parte superior derecha para búsquedas en tiempo real.

Por supuesto, DataTables tiene muchas más opciones, que conoceremos en artículos posteriores. Estas que aquí ves son sólo un botón de muestra para que veas cómo se puede configurar el plugin.

El código completo para pruebas, por si tienes alguna duda, es articulo_03_1.php:

Cómo ves, es idéntico al anterior, salvo en la declaración del método DataTable(), tal cómo hemos comentado.

DATOS EN ARCHIVO EXTERNO

Otra característica importante (yo diría que la más importante del plugin) es que los datos que usemos pueden proceder de fuentes externas al propio script. No tienen por que estar en el mismo HTML. Esto parece una perogrullada pero, si lo piensas, da mucho juego. En este artículo vamos a ver una muestra de esta característica. Es aún algo rudimentaria y rígida, pero sentará las bases para lo que veremos en el siguiente artículo.

Considera el script articulo_03_2.php:

Observa, en primer lugar, el HTML. Cuando definimos la tabla hemos suprimido todos los datos. Sólo se define la cabecera. La cabecera de la tabla es muy importante, no sólo a efectos de renderización, para que el usuario vea los rótulos. En realidad, la cabecera le dice a DataTables qué columnas tendrá, y en qué orden.

Y ahora observa las líneas resaltadas, donde aplicamos a la tabla el método DataTable(). Dónde antes usábamos las opciones, en la primera parte de este artículo, ahora tenemos una sóla opción, llamada ajax. Esta se emplea para decirle al plugin que los datos para rellenar la tabla debe obtenerlos por Ajax a partir de un script externo. Cómo valor, esta opción recibe el nombre (y, en su caso, la ruta) del script que nos va a proporcionar los datos que el plugin colocará en la página.

En nuestro caso, el script externo se llama datos_externos_03.php, y su listado es el siguiente:

Observa que hemos creado una matriz con los datos que antes teníamos en la página grabados “a fuego”. Cada fila es, a su vez, una matriz. A la hora de crear esta matriz hay dos cosas fundamentales a tener en cuenta:

Todas las filas (es decir, cada uno de los registros) tienen el mismo número de datos (cuatro, en este ejemplo). El número de datos de cada fila, y el orden en que están dispuestos en dicha fila son iguales en todas las filas, y coinciden con la disposición de la cabecera de la tabla HTML en el script principal.

• Cada fila es una matriz, y todas ellas están, a su vez, agrupadas dentro de otra matriz, con la clave data, cómo ves en la línea resaltada al principio del script. Esto es muy importante. Siempre que usemos este sistema todos los datos se agrupan bajo la clave data, o el plugin no funcionará. Ya veremos que, en otros modos de uso, se debe usar otra clave para la matriz de datos, pero, por ahora, aceptaremos data.
• La matriz se convierte en un objeto JSON, para ser devuelta al script llamante. El método DataTable() espera que los datos le lleguen en formato JSON siempre.

Y ya está. Pruébalo, para ver que funciona correctamente. Los scripts de este artículo los tienes para descargar en este enlace. En el próximo artículo iremos un paso (o dos) más alla, aprendiendo mejores maneras de sacarle partido a este plugin.