53 lines
3.5 KiB
HTML
53 lines
3.5 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 classer des données, non listées sous forme de tableau.">
|
|||
|
|
<meta name="robots" content="index, follow">
|
|||
|
|
<link rel="stylesheet" href="CSS/paper.min.css">
|
|||
|
|
<link rel="stylesheet" href="CSS/fd2html.css">
|
|||
|
|
<script src="JS/exampleWithUL.app.js" defer></script>
|
|||
|
|
<script src="JS/matomo.js" defer></script>
|
|||
|
|
<title>Classer des données non listées sous forme de tableau HTML - 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>Classer des données non listées sous forme de tableau</h2>
|
|||
|
|
|
|||
|
|
<article id="content">
|
|||
|
|
<p>Dans l’exemple ci-dessous FreeDatas2HTML liste les données autrement que sous forme de tableau.<br>Dans ce cas, l’absence d’entêtes de colonne ne permet pas d’utiliser le module rendant cliquables ces entêtes pour lancer le classement les données.</p>
|
|||
|
|
<p>Aussi, <a href="https://forge.chapril.org/Fab_Blab/freeDatas2HTML/src/branch/master/src/extensions/exampleWithUL.ts" title="Script de l’extension" target="_blank">une extension</a> est utilisée. Elle gère de manière autonome la création et le fonctionnement des liens de classements. Vous pouvez écrire votre propre extension, par exemple si vous préférez proposer une liste SELECT pour choisir le champ de classement. L’important est que la demande de classement par l’utilisateur appelle la fonction d’actualisation de FreeDatas2HTML, en lui ayant transmis préalablement le champ sur lequel classer les données et l’ordre dans lequel les classer.</p>
|
|||
|
|
</article>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div id="classement">
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<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>
|
|||
|
|
|
|||
|
|
<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/exampleWithUL.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>
|