68 lines
5.3 KiB
HTML
68 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="Exemple d'utilisation de FreeDatas2HTML pour visualiser des informations venant d'un fichier CSV.">
|
||
<meta name="robots" content="index, follow">
|
||
<link rel="stylesheet" href="CSS/paper.min.css">
|
||
<link rel="stylesheet" href="CSS/fd2html.css">
|
||
<script src="JS/exampleWithCSV.app.js" defer></script>
|
||
<title>Parser, afficher, paginer, filtrer... des données CSV en TypeScript/JavaScript</title>
|
||
</head>
|
||
<body class="paper container">
|
||
|
||
<header id="header" class="text-center">
|
||
<h1><a href="/">FreeDatas2HTML</a></h1>
|
||
<nav id="menu-principal">
|
||
<ul class="inline row flex-center">
|
||
<li><a href="./#intro" class="badge warning sm-12 col">Introduction</a></li>
|
||
<li><a href="./examples.html#content" class="badge success sm-12 col">Exemples</a></li>
|
||
<li><a href="./documentation.html#content" class="badge success sm-12 col">Documentation</a></li>
|
||
<li><a href="https://forge.chapril.org/Fab_Blab/FreeDatas2HTML" target="_blank" title="accéder au dépôt GIT" rel="noopener" class="badge success sm-12 col">Git</a></li>
|
||
</ul>
|
||
</nav>
|
||
</header>
|
||
|
||
<h2>Parser et afficher des données CSV</h2>
|
||
|
||
<div class="row">
|
||
<div id="filtre1" class="sm-12 md-6 lg-4 col"></div>
|
||
<div id="filtre2" class="sm-12 md-6 lg-4 col"></div>
|
||
<div id="filtre3" class="sm-12 md-6 lg-4 col"></div>
|
||
<div id="paginationOptions" class="sm-12 md-6 lg-6 col"></div>
|
||
<div id="search" class="sm-12 md-6 lg-6 col"></div>
|
||
</div>
|
||
|
||
<h3>Nombre total de résultats : <span id="compteur"></span></h3>
|
||
<div id="datas">
|
||
<p>Si tout se passe bien, ce texte sera remplacé par un tableau de données extraites du fichier csv.</p>
|
||
</div>
|
||
<p id="pages"></p>
|
||
|
||
<article>
|
||
<p>Cet exemple d’utilisation de FreeDatas2HTML est assez complet en montrant comment à partir d’un fichier de données, il est possible de proposer :</p>
|
||
<ul>
|
||
<li>Des <b>listes permettant de filtrer les données</b>. La troisième liste (Mots-clés) démontrant qu’il est possible d’<b>extraire des données d’un champ ayant plusieurs valeurs par ligne</b>. Ici, les valeurs distinctes sont séparées par des virgules, mais n’importe quel autre caractère séparateur peut être désigné.</li>
|
||
<li>Les sélections dans les différentes listes sont combinées pour ne garder que les résultats validant tous les choix.</li>
|
||
<li>Dans la troisième liste, <b>il est possible de sélectionner simultanément plusieurs valeurs</b> (en appuyant sur « Ctrl » sur PC). Ici, il suffit qu’au moins une des valeurs sélectionnées soient trouvée, pour qu’une ligne soit affichée.</li>
|
||
<li>Des champs (=colonnes) permettant de <b>classer les données</b> : un 1ᵉʳ clic lance un classement par ordre croissant, le 2ᵉ pour ordre décroissant et ainsi de suite. Remarquez que le champ « Abondance… » utilise une fonction spécifique, car un classement par ordre alphabétique n’aurait pas convenu ici.</li>
|
||
<li>Un <b>compteur affichant le nombre total de résultats</b>, avec prise en compte des éventuels filtres utilisés.</li>
|
||
<li>Des <b>options de pagination</b>.</li>
|
||
<li>Un <b>moteur de recherche</b>, permettant de filtrer les données, cette fois sur l’ensemble des champs, contrairement aux listes. Par défaut, ce <b>moteur de recherche est insensible à la casse, aux accents et ignore les caractères spéciaux</b>. Par ailleurs, chaque mot de l’expression saisie est cherché séparément. Tout cela est paramétrable pour permette une recherche stricte.</li>
|
||
</ul>
|
||
|
||
<p>Enfin, il est possible d’<b>afficher les données autrement que sous forme de tableau HTML</b>. Si vous visualisez cette page sur un écran large de moins de 800 px, les données seront simplement listées. Si vous avez un grand écran, vous pouvez simuler cet affichage en faisant « Ctrl+Maj+M », puis « F5 ». Appuyez de nouveau sur « F5 », une fois de retour sur grand écran pour revoir le tableau.</p>
|
||
</article>
|
||
|
||
<aside>
|
||
<p>Les données listées viennent d’<a href="./datas/elements-chimiques.csv">un fichier CSV</a> reprenant une partie des informations trouvées <a href="https://fr.wikipedia.org/wiki/%C3%89l%C3%A9ment_chimique#Caract%C3%A9ristiques_des_diff%C3%A9rents_%C3%A9l%C3%A9ments" target="_blank" rel="noopener" title="Wikipédia">sur Wikipédia</a>.</p>
|
||
</aside>
|
||
|
||
<aside>
|
||
<p><a href="https://forge.chapril.org/Fab_Blab/FreeDatas2HTML/src/branch/master/src/demo/exampleWithCSV.ts" target="_blank" title="accéder au code" rel="noopener" class="paper-btn btn-secondary">Code source utilisé par cette page.</a></p>
|
||
</aside>
|
||
|
||
<footer><p>Design : <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a> | <a href="/mentions-legales.html">Contact et mentions légales</a>.</p></footer>
|
||
</body>
|
||
</html> |