El plugin DataTables (II). Uso básico.

Facebooktwittergoogle_pluslinkedinmailFacebooktwittergoogle_pluslinkedinmail

datatablesEn 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):

datatables_articulo_02

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:

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.

     

Deja un comentario

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