Mostrar datos en DataTables

¿Os habéis preguntado alguna vez como mostrar información en una tabla forma rápida y sencilla y añadir funcionalidades sobre ella? La respuesta es: DataTables. Un plugin diseñado para ello y de uso gratuito. A continuación, explicaré cómo mostrar datos en DataTables. Será necesario tener unos conocimientos mínimos de Javascript, Jquery y Ajax. Aquí os dejo que significan:

¿Qué es Javascript? Es un lenguaje de programación que se utiliza en páginas web. Éste se ejecuta en la parte cliente. Actualmente, es interpretado por la mayoría de los navegadores web.

¿Qué es Jquey? Es una librería o framework que se utiliza para complementar a javascript y ofrece muchas ventajas super útiles e interactuar con los elementos de tus páginas html.

¿Qué es Ajax? ( JavaScript asíncrono y XML ) Es una librería o framework y ofrece un conjunto de técnicas para que la web sea más óptima y para que ofrezca al usuario una mejor experiencia en la web mientras navega.

Bien, después de un poco de culturilla, vamos al grano.

Crear página web e incluir librerías

Crea un proyecto web dinámico Java en Eclipse y crea un nuevo fichero html llamado index.html.

Crear fichero html

No te preocupes por la ubicación. Eclipse es lo suficientemente listo y lo creará donde debe, en la carpeta WebContent.

Ahora incliremos las librerías y enlaces necesarios. Como buena práctica, se suelen acceder a los enlaces oficiales de JQuery y DataTables, descargar el código y alojarlo en nuestro proyecto. Yo en este caso, incluiré los enlaces directamente:

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Mi primera DATATABLES</title>



<link rel="stylesheet" type="text/css"
	href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript"
	src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript"
	src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>

<script type="text/javascript" src="js/datatablesMascotas.js"></script>


</head>
<body>

	<h2>Mi tabla de Mascotas</h2>

	<table id="mytable" class="display" cellspacing="0" width="100%">
		<thead>
			<tr>
				<th>Tipo</th>
				<th>Nombre</th>
				<th>Color</th>
				<th>Edad</th>
			</tr>
		</thead>

		<tfoot>
			<tr>
				<th>Tipo</th>
				<th>Nombre</th>
				<th>Edad</th>
				<th>Color</th>
			</tr>
		</tfoot>
	</table>
</body>
</html>

Crear fichero json

Este fichero contendrá los datos para mostrar en nuestra tabla. Yo lo he creado dentro de un directorio llamado datos.

datatables-json

El contenido será el siguiente:

mascotas.json

	[
	{
		"tipo": "hamster",
		"nombre": "Jengibre",
		"color": "beige",
		"edad": "1"
	},
	{
		"tipo": "hamster",
		"nombre": "Chili",
		"color": "marron",
		"edad": "2"
	},
	{
		"tipo": "tortuga",
		"nombre": "Manuela",
		"color": "marron y amarillo",
		"edad": "35"
	},
	{
		"tipo": "iguana",
		"nombre": "Juan",
		"color": "verde y naranja",
		"edad": "14"
	}
]

Crear fichero javascript

Crea un fichero javascript dentro de un directorio llamado js. Lo vamos a llamar datatablesMascotas.js.

datatables-javascript

El contenido del fichero será el siguiente:

datatablesMascotas.js

$(document).ready(function() {
    $('#mytable').DataTable({
    	 "ajax": {
             "url": "datos/mascotas.json",
             "dataSrc": ""
         },
        "columns": [
            { "data": "tipo" },
            { "data": "nombre" },
            { "data": "color" },
            { "data": "edad" }
        ]
    });
});

No hay que olvidarse de incluir este nuevo fichero a nuestra página index.html, después del resto de referencias y dentro de las etiquetas head:

<script type="text/javascript"
	src="js/datatablesMascotas.js"></script>

Ejecutar código y ver el resultado en DataTables

Lo primero es levantar la aplicación. Para ello, selecciona el proyecto y ejecútalo sobre un servidor Apache previamente configurado. Si no sabes como configurarlo, puedes ver el tutorial Configurar Proyecto web y ver la sección Añadir Servidor Apache Tomcat a Eclipse.

Una vez arrancado el servidor, la dirección de la aplicación es: http://localhost:8080/MyDataTablesProject/

datatables-result

Y esto es todo!! Como ves es muy fácil mostrar nuestros datos en una tabla usando DataTables. Este plugin ofrece mucho más y puedes ver en su documentación más utilidades: https://datatables.net/

Espero que te haya sido de utilidad y nos vemos en el próximo tutorial.

Comparte si te ha gustado!!

También te podría gustar...

Deja una respuesta

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