FreeDatas2HTML/public/withCSV.html

54 lines
3.8 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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>
<script src="JS/matomo.js" defer></script><!-- Outil statistique pour le site de démonstration. À ne pas garder lors d'une réutilisation :-) -->
<title>Parser et afficher des données CSV via FreeDatas2HTML</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="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>
<article id="datas">
<p>Si tout se passe bien, ce texte sera remplacé par un tableau de données extraites du fichier csv.</p>
</article>
<p id="pages"></p>
<aside>
<p>Les données affiché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">sur Wikipédia</a>.</p>
<p>Le dernier filtre (Mots-clés) permet de montrer la possibilité d<b>extraire des données dun champ ayant plusieurs valeurs par ligne</b>, ici séparées par une virgule, sachant que lon peut désigner nimporte quel autre caractère séparateur.</p>
<p>Certains champs (=colonnes) peuvent être désignées comme devant permettre 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.</p>
<p>Il est également possible dafficher le nombre total de résultats, avec prise en compte des éventuels filtres.</p>
<p>Une autre option permet de <b>paginer les résultats</b>.</p>
<p>Enfin il est possible d<b>afficher les données autrement que sous forme de tableau HTML</b>. Si vous affichez cette page sur un écran large de moins de 800px, les données seront simplement listées. Si vous avez un grand écran, vous pouvez visualiser cet affichage en faisant «Alt+Maj+M», puis «F5». Appuyez de nouveau sur «F5», une fois de retour sur grand écran pour revoir le tableau.</p>
</aside>
<footer><p>Design : <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a> | <a href="/mentions-legales.html">Mentions légales</a>.</p></footer>
</body>
</html>