Spring Boot, JSON et DataTable

exemple Datatable

Dans cet exemple, on va juste récupérer une liste d’objets Pilote instancier dans le Controleur.

Cette liste est appelée depuis JavaScript avec AJAX et affichée dans une DataTable dans une page HTML.

Cela permet de faire le lien entre un Back (SpringBoot) et un Front (JavaScript) très basique.

Remarque : à la fin de ce cours, je vous propose plusieurs autres solutions plus moderne pour le front avec JS !

La différence avec les autres projets concerne la mise en place d’une page HTML, JS et éventuellement CSS dans le répertoire des resources static.

Créez votre projet web springpratique01 avec Spring Initialzr comme pour les précédents.

Voici les dépendances que vous devrez avoir dans votre build.gradle :

'org.webjars:jquery:2.2.4'
"org.webjars:bootstrap:3.3.7"
'org.springframework.boot:spring-boot-starter-web'
'org.springframework.boot:spring-boot-starter-tomcat'

Classe Pilote

package fr.bouget.spring.springpratique01.bean;

import java.io.Serializable;

public class Pilote implements Serializable {
	private static final long serialVersionUID = 1L;
	
	private int id;
	private String nom;
	private String site;

	public Pilote() {super();}
	
	/**
	 * Constructeur
	 * @param id
	 * @param nom
	 * @param site
	 */
	public Pilote(int id, String nom, String site) {
		super();
		this.id = id;
		this.nom = nom;
		this.site = site;
	}
	
	
	/**
	 * @return the id
	 */
	public int getId() {
		return id;
	}

	/**
	 * @param id the id to set
	 */
	public void setId(int id) {
		this.id = id;
	}

	/**
	 * @return the nom
	 */
	public String getNom() {
		return nom;
	}

	/**
	 * @param nom the nom to set
	 */
	public void setNom(String nom) {
		this.nom = nom.toUpperCase();
	}

	/**
	 * @return the site
	 */
	public String getSite() {
		return site;
	}

	/**
	 * @param site the site to set
	 */
	public void setSite(String site) {
		this.site = site.toUpperCase();;
	}

	/* (non-Javadoc)
	 * @see java.lang.Object#toString()
	 */
	@Override
	public String toString() {
		return "Pilote : "+this.getId()+ " "+this.getNom()+ " "+this.getSite();
	}
}

Classe PiloteController

package fr.bouget.spring.restapi.springdemo03.controller;

import java.util.ArrayList;
import java.util.List;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import fr.bouget.spring.restapi.springdemo03.bean.Pilote;

/**
 * @author Philippe
 *
 */
@RestController
@RequestMapping("/demo3")
public class PiloteController  {
	
	private List<Pilote> liste = new ArrayList<>();
	
	public PiloteController()
	{
		Pilote p = new Pilote(1,"Josselin","Montreuil");
		Pilote p2 = new Pilote(2,"Philippe", "Paris");
		Pilote p3 = new Pilote(3, "Anissa", "Marseille");
		this.liste.add(p);
		this.liste.add(p2);
		this.liste.add(p3);
	}
	
	@GetMapping("/pilotes")
	public List<Pilote> getAll()
	{
		return this.liste;
		
	}

}

Fichier pilotes.js

Ici, j’ai utilisé Ajax mais vous pouvez utiliser JQuery, fetch, Grid.js, Tabulator, List.js, Ag-Grid que vous pouvez découvrir en bas de page avec des exemples de codes pour ce projet de démonstration.

// Juste remplir le tableau html avec la liste des pilotes
$(document).ready( function () {
	 var table = $('#tablePilotes').DataTable({
			"sAjaxSource": "/api/pilotes",
			"sAjaxDataProp": "",
			"order": [[ 0, "asc" ]],
			"aoColumns": [
			    	{ "mData": "id"},
			    	{ "mData": "nom" },
			    	{ "mData": "site" }
			]
	 })
});

Fichier index.html

/<!DOCTYPE html>
<html>
<head>
<title>Spring - JavaScript</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<title>teste</title>

</head>
<body>
	<header id="header">
		<div class="inner">
			<a href="index.html" class="logo"> <span class="symbol"><img
				src="image/logo-devweb.png" alt="Logo DevWeb" /></span><span
				class="title">Chez SpringBoot c'est le printemps...</span>
			</a>
		</div>
	</header>

<!-- ICI - ultérieurement ajout d'un formulaire avec CRUD -->

<article class="col-sm-6 col-xs-12" id="piloteList">
	<table id="tablePilotes" class="display">
		<thead>
			<tr>
				<th>Identifiant</th>
				<th>Nom</th>
				<th>Site</th>
			</tr>
		</thead>
	</table>
</article>	
<script	src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script	src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script	src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="/js/pilotes.js"></script>
</body>
</html>

Pour le logo, mettez ce que vous voulez à la place de src="image/logo-devweb.png"

Y a plus qu’à tester

Autres propositions de Front avec JS (alternatives à DataTable)

Dans les codes suivants, nous explorons différentes manières d’afficher des données JSON récupérées depuis notre back-end Spring Boot, sans utiliser de framework front-end lourd comme Angular, React ou Vue.js. L’objectif est de vous montrer comment interagir avec une API REST et afficher les résultats dans une page web de manière simple et pédagogique de différentes manière.

Méthode Basique : `fetch` + Boucle JavaScript

La méthode la plus simple consiste à utiliser l’API fetch pour récupérer les données, puis à les afficher dans un tableau HTML en utilisant une boucle JavaScript.

Avantages

Aucune dépendance externe : Utilise uniquement du JavaScript natif.
Simple à comprendre : Idéal pour les débutants en JS.

Exemple de Code

<table id="tablePilotes">
  <thead>
    <tr>
      <th>ID</th>
      <th>Nom</th>
      <th>Site</th>
    </tr>
  </thead>
  <tbody id="tableBody">
    <!-- Les données seront insérées ici -->
  </tbody>
</table>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    fetch('/api/pilotes')
      .then(response => response.json())
      .then(data => {
        const tableBody = document.getElementById('tableBody');
        data.forEach(pilote => {
          const row = document.createElement('tr');
          row.innerHTML = `
            <td>${pilote.id}</td>
            <td>${pilote.nom}</td>
            <td>\${pilote.site}</td>
          `;
          tableBody.appendChild(row);
        });
      })
      .catch(error => console.error('Erreur:', error));
  });
</script>

Bibliothèque légère avec `Grid.js`

Grid.js est une bibliothèque moderne et légère pour afficher des tableaux de données. Elle est plus simple que DataTables et ne nécessite pas jQuery.

Avantages

Légère et facile à intégrer.
Supporte le chargement asynchrone des données.
Design moderne et personnalisable.

Exemple de Code

<link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />
<script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>

<div id="tablePilotes"></div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    new gridjs.Grid({
      columns: ['ID', 'Nom', 'Site'],
      server: {
        url: '/api/pilotes',
        then: data => data.map(pilote => [pilote.id, pilote.nom, pilote.site])
      },
      sort: true,
      search: true,
      pagination: true
    }).render(document.getElementById('tablePilotes'));
  });
</script>

Bibliothèque plus puissante avec `Tabulator`

Tabulator est une bibliothèque légère et puissante pour afficher des tableaux interactifs. Elle est plus riche en fonctionnalités que Grid.js, mais reste simple à utiliser.

Avantages

Très personnalisable.
Supporte le chargement asynchrone, le tri, la pagination, etc.
Pas de dépendance à jQuery.

Exemple de Code

<link href="https://unpkg.com/tabulator-tables@5.5.2/dist/css/tabulator.min.css" rel="stylesheet">
<script src="https://unpkg.com/tabulator-tables@5.5.2/dist/js/tabulator.min.js"></script>

<div id="tablePilotes"></div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const table = new Tabulator("#tablePilotes", {
      ajaxURL: "/api/pilotes",
      layout: "fitColumns",
      columns: [
        { title: "ID", field: "id" },
        { title: "Nom", field: "nom" },
        { title: "Site", field: "site" }
      ],
      pagination: "local",
      paginationSize: 10,
      paginationSizeSelector: [5, 10, 20],
    });
  });
</script>

Bibliothèque légère pour les Listes avec `List.js`

List.js est une bibliothèque légère pour ajouter des fonctionnalités de recherche, tri et pagination à une liste ou un tableau HTML.

Avantages

Très légère (~5 Ko).
Simple à intégrer.
Idéale pour des listes ou petits tableaux.

Exemple de Code

<input type="text" class="search" placeholder="Rechercher..." />

<table id="tablePilotes">
  <thead>
    <tr>
      <th>ID</th>
      <th>Nom</th>
      <th>Site</th>
    </tr>
  </thead>
  <tbody id="pilotesList">
    <!-- Les données seront insérées ici -->
  </tbody>
</table>

<script src="https://cdn.jsdelivr.net/npm/list.js@2.3.1/dist/list.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    fetch('/api/pilotes')
      .then(response => response.json())
      .then(data => {
        const listElement = document.getElementById('pilotesList');
        data.forEach(pilote => {
          const row = document.createElement('tr');
          row.innerHTML = `
            <td class="id">\${pilote.id}</td>
            <td class="nom">${pilote.nom}</td>
            <td class="site">${pilote.site}</td>
          `;
          listElement.appendChild(row);
        });

        const options = {
          valueNames: ['id', 'nom', 'site']
        };
        new List('tablePilotes', options);
      });
  });
</script>

Bibliothèque avancée avec `Ag-Grid`

Ag-Grid est une bibliothèque puissante pour les tableaux de données avancés. Elle est plus lourde, mais offre des fonctionnalités très complètes.

Avantages

Très performante pour les grands jeux de données.
Richesse des fonctionnalités (tri, filtres, pagination, etc.).
Personnalisation poussée.

Exemple de Code

<script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/styles/ag-grid.css">
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/styles/ag-theme-alpine.css">

<div id="tablePilotes" class="ag-theme-alpine" style="height: 400px;"></div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    fetch('/api/pilotes')
      .then(response => response.json())
      .then(data => {
        const gridOptions = {
          columnDefs: [
            { headerName: "ID", field: "id" },
            { headerName: "Nom", field: "nom" },
            { headerName: "Site", field: "site" }
          ],
          rowData: data,
          pagination: true,
          paginationPageSize: 10,
        };
        new agGrid.Grid(document.getElementById('tablePilotes'), gridOptions);
      });
  });
</script>

Recommandations

Niveau de Complexité	Bibliothèque Recommandée	Pourquoi ?
Débutant	`fetch` + Boucle JavaScript	Montre les bases de la récupération et de l’affichage des données.
Intermédiaire	`Grid.js` ou `Tabulator`	Montre comment une bibliothèque légère peut simplifier le code.
Avancé	`List.js` ou `Ag-Grid`	Permet d’explorer des fonctionnalités plus avancées comme la recherche, le tri et la pagination.

Conclusion

Si vous souhaitez utiliser les différents exemples de front JS pour ce TP, n’hésitez pas !

Auteur : Philippe Bouget

Spring Boot, JSON et DataTable

Classe Pilote

Classe PiloteController

Fichier pilotes.js

Fichier index.html

Y a plus qu’à tester

Autres propositions de Front avec JS (alternatives à DataTable)

Méthode Basique : fetch + Boucle JavaScript

Avantages

Exemple de Code

Bibliothèque légère avec Grid.js

Avantages

Exemple de Code

Bibliothèque plus puissante avec Tabulator

Avantages

Exemple de Code

Bibliothèque légère pour les Listes avec List.js

Avantages

Exemple de Code

Bibliothèque avancée avec Ag-Grid

Avantages

Exemple de Code

Recommandations

Conclusion

Méthode Basique : `fetch` + Boucle JavaScript

Bibliothèque légère avec `Grid.js`

Bibliothèque plus puissante avec `Tabulator`

Bibliothèque légère pour les Listes avec `List.js`

Bibliothèque avancée avec `Ag-Grid`