Show data in DataTables

by Rosa · Published April 25, 2020 · Updated February 15, 2021

Have you ever wondered how to display information in a table quickly and easily and add functionality to it? The answer is: DataTables. A plugin designed for it and free to use. Next, I will explain how to display data in DataTables. It will be necessary to have a minimum knowledge of Javascript, Jquery and Ajax. Here I leave you what they mean:

What is 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.

What is 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.

What is 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.

Create website and include libraries

Create a dynamic Java web project in Eclipse and create a new html file called index.html.

Don’t worry about the location. Eclipse is smart enough and will create it where it should, in the WebContent folder.

We will now include the necessary libraries and links. As a good practice, generally access the official JQuery and DataTables links, download the code and host this your our project. In this case, I will include the links directly:

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>

Create json file

This file will contain the data to display in our table. I have created it inside a directory called datos.

The content will be as follows:

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"
	}
]

Create javascript file

Create a javascript file inside a directory called js. Let’s call it datatablesMascotas.js.

The content of the file will be as follows:

datatablesMascotas.js

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

We must not forget to include this new file in our index.html page, after the rest of the references and inside the main tags head:

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

Run code and see the result in 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.

The first thing is to lift the application. To do this, select the project and run it on a previously configured Apache server. If you don’t know how to configure it, you can see the tutorial Configure Web Project and see the section Add Apache Tomcat server to Eclipse.

Once the server is started, the application address is: http://localhost:8080/MyDataTablesProject/

And that’s all!! As you can see, it is very easy to show our data in a table using DataTables. This plugin offers much more and you can see in its documentation more utilities:

https://datatables.net/

I hope it has been useful to you and see you in the next tutorial.

Share if you liked it !!