En el artículo anterior introdujimos el plugin DataTables, apuntando brevemente cual es su utilidad. Se trata de un mecanismo, basado en jQuery, para renderizar vistas en forma de tablas, a partir de un dataset, de forma que implementen ciertas funcionalidades que resultan prácticas para el usario, haciendo nuestra web más usable y amigable. En concreto nos permite ordenar los datos usando distintas columnas cómo criterio, realizar búsquedas en tiempo real, crear paginaciones cuando hay muchos datos (nosotros, o el usuario, según el caso, decidimos, dinámicamente, cuantos resultados se muestran por página), etc.
En el artículo anterior vimos los prerrequisitos necesarios, y lo que necesitamos para usar el plugin. En este artículo vamos a empezar a mostrar su potencia.
UN PRIMER EJEMPLO DE USO
Vamos a estrenarnos con un ejemplo muy simple y rudimentario. Tanto, que, de hecho, los datos que empleemos para este artículo ni siquiera procederán de una BBDD, sino que los tendremos grabados “a fuego” en el código. Por supuesto, esta no es manera de trabajar en el mundo real, y el ejemplo que vamos a ver aquí no tendría aplicación en ningún proyecto, pero nos vendrá fenomenal a efectos didácticos. La tabla de datos que vamos a usar se refiere a miembros de un club, de los que tenemos su nombre, apellidos, fecha de ingreso y provincia donde viven. Tenemos un total de veinte miembros, como vemos en la tabla de ejemplo:
| NOMBRE | APELLIDOS | INGRESO | PROVINCIA |
|---|---|---|---|
| Rodrigo | Torres Fuentes | 10/10/1985 | Zamora |
| Ana | López Yago | 02/06/1985 | León |
| Manuel | García Lago | 18/04/1986 | Barcelona |
| Carmen | Ortega Pérez | 23/01/1986 | Granada |
| Sonia | De Diego Salamanca | 16/08/1985 | Madrid |
| Susana | Barberá Fina | 15/02/1987 | Barcelona |
| Luis | Moscoso Yáñez | 06/11/1988 | Madrid |
| Pedro | Del Arco García | 17/08/1987 | Madrid |
| Sandra | Fernández Gómez | 31/10/1985 | Barcelona |
| Carmen | Doblado Porras | 11/09/1988 | Madrid |
| Pedro | Blanco Delgado | 31/01/1986 | Lugo |
| Raúl | Povedilla Martínez | 15/03/1988 | Valencia |
| Alfonso | López López | 06/12/1985 | Sevilla |
| Sonia | Martín Jaen | 23/02/1987 | Logroño |
| Carmen | Morales Torres | 12/12/1988 | Madrid |
| Antonio | De la Mata Fernández | 10/04/1986 | Barcelona |
| Diego | Torrecuadrada García | 23/07/1987 | Cáceres |
| Rosa | Blanco Gómez | 22/06/1985 | Cuenca |
| Cristina | Blanco Gómez | 11/01/1987 | Barcelona |
| Cristina | Martos Del Ángel | 10/02/1986 | Madrid |
Queremos que, al renderizar estos datos en una vista, se muestren de diez en diez. Cómo son veinte miembros, habrá dos páginas. El resultado podría parecerse al de la siguiente imagen (en la práctica hemos suprimido los colores de las filas para dejar el ejemplo “en bruto”, facilitando la comprensión de lo que hacemos):
Cómo puedes ver, tenemos, arriba a la izquierda, un selector para indicar cuantos datos queremos ver en la tabla. Como tenemos seleccionados 10 (que es el valor por defecto), se generan dos páginas de datos, cómo podemos ver en el paginador de la parte inferior derecha. En la parte inferior izquierda nos muestra un mensaje que indica que se están visualizando los datos del 1 al 10, de un total de 20. Arriba a la derecha vemos un buscador, Si tecleas una cadena de uno o más caracteres verás sólo los miembros cuyos datos (cualquiera de sus datos) contenga esa cadena.
Además, los miembros aparecen, por defecto, ordenados por el nombre, que es la primera columna. Puedes pulsar con el ratón en las cabeceras de las distintas columnas (NOMBRE, APELLIDOS, INGRESO o PROVINCIA) y verás cómo se reordenan.
El ejemplo es bastante funcional, pero aún adolece de muchas limitaciones. Por ejemplo, todos los textos aparecen en inglés. Además, hay muchas prestaciones que en este primer ejemplo no están disponibles. En posteriores artículos iremos mejorando todo esto.
EL CÓDIGO
Vamos a ver el código de la página que nos da este resultado. Lo hemos llamado articulo_02.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 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 |
<!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(); </script> </body> </html> |
En la cabecera de la página hemos incluido el CSS de DataTables por CDN. Observa que dentro del cuerpo de la página tenemos toda la tabla de datos, con las 20 filas, y están desordenadas. Así sería cómo aparecerían si no hubiéramos usado DataTables. Observa que a la tabla la hemos dado un id (tabla_de_miembros) para poder referenciarla.
Al final del body hemos incluido, por CDN’s, jQuery y el JavaScript del plugin DataTables. Es una buena práctica incluir los JavaScripts externos que necesitemos al final del cuerpo del documento. Así, cuando se les llama, todos los elementos del DOM están ya listos para su uso (podrían no estár cargados aún, si son, por ejemplo, archivos multimedia que tarden más, pero ya están referenciados). Además observa que, de los JavaScripts externos que se usan, el primero que se invoca es jQuery, porque el plugin requiere que jQuery ya esté en memoria. Las invocaciones JavaScript necesarias, por lo tanto, quedan así:
<!-- 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>
A continuación incluimos el JavaScript que hace que las funcionalidades básicas aportadas por DataTables se incorporen a la tabla de datos que tenemos en el cuerpo de la página. Lo hacemos así:
<script language="javascript">
$('#tabla_de_miembros').DataTable();
</script>
Cómo ves, referenciamos la tabla por su id y le aplicamos el método DataTable(), que es del propio plugin. Observa que, aunque es una instrucción jQuery, no hemos usado $(document).ready();. Esto se debe a que, cómo el código jQuery está al final de todo, no necesitamos comprobar que el DOM exista. Ya sabemos que, llegado este punto, existirá. Esa es la razón por la que el JavaScript externo (y el que depende del externo) se coloque al final del documento.
Con esto ya tenemos un ejemplo funcional. En el próximo artículo aprenderemos a mejorar esto, dando un paso más. El código de este artículo, por si quieres descargñartelo, está disponible en este enlace.
