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
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Uso de DataTables</title> <!-- El CSS de DataTables --> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/pdfmake-0.1.18/dt-1.10.12/af-2.1.2/b-1.2.2/b-colvis-1.2.2/b-flash-1.2.2/b-html5-1.2.2/b-print-1.2.2/cr-1.3.2/fc-3.2.2/fh-3.1.2/kt-2.1.3/r-2.1.0/rr-1.1.2/sc-1.4.2/se-1.2.0/datatables.min.css"/> </head> <body> <table id="tabla_de_miembros"> <thead> <tr style="height: 18px; border: 2px solid #000000; background-color: #e3e3e3; "> <th style="text-align: left;">NOMBRE</th> <th style="text-align: left;">APELLIDOS</th> <th style="text-align: left;">INGRESO</th> <th style="text-align: left;">PROVINCIA</th> </tr> </thead> <tbody> <tr> <td>Rodrigo</td> <td>Torres Fuentes</td> <td>10/10/1985</td> <td>Zamora</td> </tr> <tr> <td>Ana</td> <td>López Yago</td> <td>02/06/1985</td> <td>León</td> </tr> <tr> <td>Manuel</td> <td>García Lago</td> <td>18/04/1986</td> <td>Barcelona</td> </tr> <tr> <td>Carmen</td> <td>Ortega Pérez</td> <td>23/01/1986</td> <td>Granada</td> </tr> <tr> <td>Sonia</td> <td>De Diego Salamanca</td> <td>16/08/1985</td> <td>Madrid</td> </tr> <tr> <td>Susana</td> <td>Barberá Fina</td> <td>15/02/1987</td> <td>Barcelona</td> </tr> <tr> <td>Luis</td> <td>Moscoso Yáñez</td> <td>06/11/1988</td> <td>Madrid</td> </tr> <tr> <td>Pedro</td> <td>Del Arco García</td> <td>17/08/1987</td> <td>Madrid</td> </tr> <tr> <td>Sandra</td> <td>Fernández Gómez</td> <td>31/10/1985</td> <td>Barcelona</td> </tr> <tr> <td>Carmen</td> <td>Doblado Porras</td> <td>11/09/1988</td> <td>Madrid</td> </tr> <tr> <td>Pedro</td> <td>Blanco Delgado</td> <td>31/01/1986</td> <td>Lugo</td> </tr> <tr> <td>Raúl</td> <td>Povedilla Martínez</td> <td>15/03/1988</td> <td>Valencia</td> </tr> <tr> <td>Alfonso</td> <td>López López</td> <td>06/12/1985</td> <td>Sevilla</td> </tr> <tr> <td>Sonia</td> <td>Martín Jaen</td> <td>23/02/1987</td> <td>Logroño</td> </tr> <tr> <td>Carmen</td> <td>Morales Torres</td> <td>12/12/1988</td> <td>Madrid</td> </tr> <tr> <td>Antonio</td> <td>De la Mata Fernández</td> <td>10/04/1986</td> <td>Barcelona</td> </tr> <tr> <td>Diego</td> <td>Torrecuadrada García</td> <td>23/07/1987</td> <td>Cáceres</td> </tr> <tr> <td>Rosa</td> <td>Blanco Gómez</td> <td>22/06/1985</td> <td>Cuenca</td> </tr> <tr> <td>Cristina</td> <td>Blanco Gómez</td> <td>11/01/1987</td> <td>Barcelona</td> </tr> <tr> <td>Cristina</td> <td>Martos Del Ángel</td> <td>10/02/1986</td> <td>Madrid</td> </tr> </tbody> </table> <!-- jQuery --> <script language="javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <!-- El JavaScript de DataTables --> <script language="javascript" type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/pdfmake-0.1.18/dt-1.10.12/af-2.1.2/b-1.2.2/b-colvis-1.2.2/b-flash-1.2.2/b-html5-1.2.2/b-print-1.2.2/cr-1.3.2/fc-3.2.2/fh-3.1.2/kt-2.1.3/r-2.1.0/rr-1.1.2/sc-1.4.2/se-1.2.0/datatables.min.js"></script> <!-- El código JavaScript --> <script language="javascript"> $('#tabla_de_miembros').DataTable({ 'paging': false, 'ordering': false, 'info': false, 'searching': false }); </script> </body> </html> |
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
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Uso de DataTables</title> <!-- El CSS de DataTables --> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/pdfmake-0.1.18/dt-1.10.12/af-2.1.2/b-1.2.2/b-colvis-1.2.2/b-flash-1.2.2/b-html5-1.2.2/b-print-1.2.2/cr-1.3.2/fc-3.2.2/fh-3.1.2/kt-2.1.3/r-2.1.0/rr-1.1.2/sc-1.4.2/se-1.2.0/datatables.min.css"/> </head> <body> <table id="tabla_de_miembros"> <thead> <tr style="height: 18px; border: 2px solid #000000; background-color: #e3e3e3; "> <th style="text-align: left;">NOMBRE</th> <th style="text-align: left;">APELLIDOS</th> <th style="text-align: left;">INGRESO</th> <th style="text-align: left;">PROVINCIA</th> </tr> </thead> </table> <!-- jQuery --> <script language="javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <!-- El JavaScript de DataTables --> <script language="javascript" type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/pdfmake-0.1.18/dt-1.10.12/af-2.1.2/b-1.2.2/b-colvis-1.2.2/b-flash-1.2.2/b-html5-1.2.2/b-print-1.2.2/cr-1.3.2/fc-3.2.2/fh-3.1.2/kt-2.1.3/r-2.1.0/rr-1.1.2/sc-1.4.2/se-1.2.0/datatables.min.js"></script> <!-- El código JavaScript --> <script language="javascript"> $('#tabla_de_miembros').DataTable({ 'ajax': 'datos_externos_03.php' }); </script> </body> </html> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 |
<?php $miembros = array("data"=>array( array( "Rodrigo", "Torres Fuentes", "10/10/1985", "Zamora" ), array( "Ana", "López Yago", "02/06/1985", "León" ), array( "Manuel", "García Lago", "18/04/1986", "Barcelona" ), array( "Carmen", "Ortega Pérez", "23/01/1986", "Granada" ), array( "Sonia", "De Diego Salamanca", "16/08/1985", "Madrid" ), array( "Susana", "Barberá Fina", "15/02/1987", "Barcelona" ), array( "Luis", "Moscoso Yáñez", "06/11/1988", "Madrid" ), array( "Pedro", "Del Arco García", "17/08/1987", "Madrid" ), array( "Sandra", "Fernández Gómez", "31/10/1985", "Barcelona" ), array( "Carmen", "Doblado Porras", "11/09/1988", "Madrid" ), array( "Pedro", "Blanco Delgado", "31/01/1986", "Lugo" ), array( "Raúl", "Povedilla Martínez", "15/03/1988", "Valencia" ), array( "Alfonso", "López López", "06/12/1985", "Sevilla" ), array( "Sonia", "Martín Jaen", "23/02/1987", "Logroño" ), array( "Carmen", "Morales Torres", "12/12/1988", "Madrid" ), array( "Antonio", "De la Mata Fernández", "10/04/1986", "Barcelona" ), array( "Diego", "Torrecuadrada García", "23/07/1987", "Cáceres" ), array( "Rosa", "Blanco Gómez", "22/06/1985", "Cuenca" ), array( "Cristina", "Blanco Gómez", "11/01/1987", "Barcelona" ), array( "Cristina", "Martos Del Ángel", "10/02/1986", "Madrid" )) ); $JSON_deMiembros = json_encode($miembros, JSON_HEX_QUOT); echo $JSON_deMiembros; ?> |
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 clavedata
, 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, aceptaremosdata
. - 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.