# Tableau HTML triable à partir d'un fichier JSON

**URL:** <https://www.debian-fr.org/t/tableau-html-triable-a-partir-dun-fichier-json/89781>\
**Category:** Programmation\
**Created:** [Avril 3, 2024, 5:22 UTC](https://www.debian-fr.org/t/tableau-html-triable-a-partir-dun-fichier-json/89781 "2024-04-03T17:22:56Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sputnik93](https://www.debian-fr.org/letter_avatar_proxy/v4/letter/s/35a633/32.png) [@Sputnik93](https://www.debian-fr.org/u/Sputnik93)\
**Post date:** [Avril 3, 2024, 5:22 UTC](https://www.debian-fr.org/t/tableau-html-triable-a-partir-dun-fichier-json/89781/1 "2024-04-03T17:22:56Z")

</div>

Bonjour,

ayant la charge de pas mal de sites (sous SPIP, principalement) répartis sur pas mal de serveurs web, avec des _middlewares_ (SPIP et PHP en particulier) sous pas mal de versions, je voudrais réaliser une sorte de tableau de bord de ces sites, mis à jour automatiquement tous les soirs et servi dans une page web.

J’ai déjà fait la partie «&nbsp;collecte des données&nbsp;», les données sont restituées sur le serveur dans un fichier json, de la forme

```json
[
  {
    "Hôte": "webserver A",
    "Site": "www.blablabla.com",
    "Version_SPIP": "4.2.10",
    "Version_PHP": "php8.2"
  },
  {
    "Hôte": "webserver B",
    "Site": "www.toto.org",
    "Version_SPIP": "4.2.9",
    "Version_PHP": "php8.2"
  }
]

```

(je n’ai pas de préférence pour le type de fichier, cela pourrait aussi être du CSV ou autre, mais JSON a l’air d’être souvent utilisé dans ce genre de cas de figure)

J’ai aussi fait une petite moulinette dans un script shell pour générer un tableau HTML à partir des données, mais le résultat n’est pas très pratique à l’usage: comme il y a beaucoup d’entrées, ça serait bien que le tableau puisse être trié sur l’une ou l’autre des colonnes, et que les lignes puissent être filtrées sur la base d’une chaîne de caractères. Et dans un 2e temps, avec un peu de CSS aussi, pour que ça soit moins austère.  
Comme faire tout ça dépasse de très très loin mes maigres connaissances en frontend, je me suis tourné vers [DataTables](https://www.datatables.net/), qui a l’air d’être une référence en la matière.

De ce que j’ai compris de la page [«&nbsp;getting started&nbsp;»](https://www.datatables.net/manual/installation) et des autres pages (en particulier [celle-ci](https://www.datatables.net/manual/server-side)), dans mon cas je dois utiliser le _server side processing_ pour générer le tableau HTML à partir de mon fichier json.

J’ai donc écrit ce fichier `index.html`

```html
<!DOCTYPE html>
<html>
<head>
        <meta charset="UTF-8"> 
        <title>Inventaire des sites sous SPIP</title>
        <script src="https://code.jquery.com/jquery-3.7.1.js" type="text/javascript"></script>
</head>
<body>
<table id="tableau"></table>
<script src="https://cdn.datatables.net/2.0.3/js/dataTables.js" type="text/javascript"></script>
<script>
        $('#tableau').DataTable( {
            serverSide: true,
            ajax: 'inventaire.json'
        } );
</script>
</body>
</html>

```

Les colonnes du tableau ne sont pas définies, car d’après la doc de DataTables, elles peuvent être récupérées, et les `<thead>` et autres `<th>` construits à partir du fichier en entrée.

Mais ça ne fonctionne pas super bien, et le résultat affiche ceci:

 ![image](https://www.debian-fr.org/uploads/default/original/2X/8/80428da775784e2b7868bd01c5a2d2dca111b21a.png)

Pourtant le fichier `inventaire.json` est bien récupéré, et en parcourant la réponse serveur dans la console de Firefox ou logs du serveur web, on voit que le fichier json est bien envoyé.

En ouvrant le débugueur de Firefox, à l’exécution du script jquery.js, il y a une exception sur ce bloc

```auto
	support.cssHas = assert( function() {
		try {
			document.querySelector( ":has(*,:jqfake)" );
			return false;
		} catch ( e ) {
			return true;
		}
	} );

```

et l’erreur est `SyntaxError: Document.querySelector: ':has(*,:jqfake)' is not a valid selector`

Mais je ne sais pas du tout si c’est pertinent, si ça se trouve j’ai juste fait une erreur de méga débutant que je suis, dans le fichier html.

Si une personne a déjà utilisé DataTables, ou a une autre approche pas trop compliquée pour parvenir à mes fins, ça m’aidera beaucoup !

---

<div class="post-metadata">

**Author:** ![dindoun](https://www.debian-fr.org/user_avatar/www.debian-fr.org/dindoun/32/4281_2.png) [@dindoun](https://www.debian-fr.org/u/dindoun)\
**Post date:** [Avril 3, 2024, 8:05 UTC](https://www.debian-fr.org/t/tableau-html-triable-a-partir-dun-fichier-json/89781/2 "2024-04-03T20:05:56Z")

</div>

tu peux montrer ce que tu veux comme résultat?

---

<div class="post-metadata">

**Author:** ![Sputnik93](https://www.debian-fr.org/letter_avatar_proxy/v4/letter/s/35a633/32.png) [@Sputnik93](https://www.debian-fr.org/u/Sputnik93)\
**Post date:** [Avril 4, 2024, 4:44 UTC](https://www.debian-fr.org/t/tableau-html-triable-a-partir-dun-fichier-json/89781/3 "2024-04-04T16:44:29Z")

</div>

Le tableau présenté dans cette page, par exemple: [DataTables example - Zero configuration](https://www.datatables.net/examples/basic_init/zero_configuration.html)