FreeDatas2HTML/public/index.html

34 lines
2.4 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.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Page d'exemple d'utilisation du script freeDatas2HTML pour visualiser des informations venant d'un fichier CSV.">
<meta name="robots" content="noindex">
<link rel="stylesheet" href="CSS/paper.min.css">
<script src="JS/firstExample.app.js" defer></script>
<title>freeDatas2HTML : démo affichage données venant d'un fichier CSV.</title>
</head>
<body class="paper container">
<h1>freeDatas2HTML</h1>
<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="col-12 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">sur Wikipédia</a>.</p>
<p>La dernière colonne permet de montrer la possibilité d'<b>extraire des données d'une colonne ayant plusieurs valeurs par ligne</b>, ici séparées par une virgule.<br>Ce choix de la virgule comme séparateur ne pose pas de problème, tant le fichier CSV est correctement conçu.<br>Elle ne doit par contre pas être présente dans les expressions à extraire de la colonne, sachant que l'on peut désigner n'importe quel autre caractère séparateur.</p>
<p>Toujours en option, certaines peuvent être désignées comme 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.</p>
<p>Il est également possible d'afficher le nombre total de résultats, avec prise en compte des éventuels filtres.</p>
<p>Enfin, une dernière option permet de <b>paginer les résultats</b>.</p>
<p>Design basé sur <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a></p></aside>
</body>
</html>