Ajout Matomo site de démo.
This commit is contained in:
parent
8a822ab6e7
commit
f7ab217718
@ -1,82 +1,83 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Présentation de FreeDatas2HTML, module TypeScript permettant de parser, afficher, filtrer... des données, côté client.">
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="stylesheet" href="CSS/paper.min.css">
|
||||
<link rel="stylesheet" href="CSS/fd2html.css">
|
||||
<title>FreeDatas2HTML : parser et afficher des données en TypeScript/JavaScript</title>
|
||||
</head>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Présentation de FreeDatas2HTML, module TypeScript permettant de parser, afficher, filtrer... des données, côté client.">
|
||||
<meta name="robots" content="index,follow">
|
||||
<link rel="stylesheet" href="CSS/paper.min.css">
|
||||
<link rel="stylesheet" href="CSS/fd2html.css">
|
||||
<script src="JS/matomo.js" defer></script><!-- Outil statistique pour le site de démonstration. À ne pas garder lors d'une réutilisation :-) -->
|
||||
<title>FreeDatas2HTML : parser et afficher des données en TypeScript/JavaScript</title>
|
||||
</head>
|
||||
|
||||
<body class="paper container">
|
||||
<h1>FreeDatas2HTML</h1>
|
||||
<h2>Parser, afficher, paginer, filtrer, classer des données… à l’aide de TypeScript/JavaScript</h2>
|
||||
<body class="paper container">
|
||||
<h1>FreeDatas2HTML</h1>
|
||||
<h2>Parser, afficher, paginer, filtrer, classer des données… à l’aide de TypeScript/JavaScript</h2>
|
||||
|
||||
<article id="datas">
|
||||
<h3>Parser des données JSON, CSV ou HTML</h3>
|
||||
<article id="datas">
|
||||
<h3>Parser des données JSON, CSV ou HTML</h3>
|
||||
|
||||
<p>FreeDatas2HTML vous permet de <strong>parser des données</strong> listées dans une page internet ou encore une ressource distante. Les formats de données possibles sont le <a href="/withJSON.html" title="Page d'exemple">JSON</a>, le <a href="/withCSV.html" title="Page d'exemple">CSV</a> ou encore le <a href="/withHTML.html" title="Page d'exemple">HTML</a>, pour peu que les données y soient listées de manière rigoureuse.</p>
|
||||
<p>FreeDatas2HTML vous permet de <strong>parser des données</strong> listées dans une page internet ou encore une ressource distante. Les formats de données possibles sont le <a href="/withJSON.html" title="Page d'exemple">JSON</a>, le <a href="/withCSV.html" title="Page d'exemple">CSV</a> ou encore le <a href="/withHTML.html" title="Page d'exemple">HTML</a>, pour peu que les données y soient listées de manière rigoureuse.</p>
|
||||
|
||||
<p><a href="/userFile.html" title="Page de test" class="paper-btn btn-success">Testez ici avec votre propre fichier CSV.</a></p>
|
||||
<p><a href="/userFile.html" title="Page de test" class="paper-btn btn-success">Testez ici avec votre propre fichier CSV.</a></p>
|
||||
|
||||
<p>Le parseur retourne de manière distincte une liste des champs trouvés, une liste des « enregistrements », ainsi que les éventuelles anomalies rencontrées durant le traitement. Vous pouvez <strong>utiliser votre propre parseur</strong>, par exemple pour gérer d’autres formats de données (XML…).</p>
|
||||
<p>Le parseur retourne de manière distincte une liste des champs trouvés, une liste des « enregistrements », ainsi que les éventuelles anomalies rencontrées durant le traitement. Vous pouvez <strong>utiliser votre propre parseur</strong>, par exemple pour gérer d’autres formats de données (XML…).</p>
|
||||
|
||||
<p>Une fois les données parsées, <strong>tous les traitements se font côté client</strong>, sans nouvel appel nécessaire à l’éventuelle source de données distante.</p>
|
||||
<p>Une fois les données parsées, <strong>tous les traitements se font côté client</strong>, sans nouvel appel nécessaire à l’éventuelle source de données distante.</p>
|
||||
|
||||
<h3>Afficher les données dans votre page web</h3>
|
||||
<h3>Afficher les données dans votre page web</h3>
|
||||
|
||||
<p>FreeDatas2HTML vous permet d’afficher les données dans votre page web, par défaut <strong>sous forme de tableau</strong>. Mais il est possible de paramèter d’autres formats, par exemple <strong>une liste HTML</strong> ou encore d’utiliser son propre moteur de rendu, tout en bénéficiant du reste du code de FreeDatas2HTML.</p>
|
||||
<p>FreeDatas2HTML vous permet d’afficher les données dans votre page web, par défaut <strong>sous forme de tableau</strong>. Mais il est possible de paramèter d’autres formats, par exemple <strong>une liste HTML</strong> ou encore d’utiliser son propre moteur de rendu, tout en bénéficiant du reste du code de FreeDatas2HTML.</p>
|
||||
|
||||
<p>Vous pouvez choisir de ne <strong>pas afficher tous les champs trouvés</strong> par le parseur, tout en les gardant disponibles pour les filtres. En option, un <strong>compteur d’enregistrements</strong> peut être affiché.</p>
|
||||
<p>Vous pouvez choisir de ne <strong>pas afficher tous les champs trouvés</strong> par le parseur, tout en les gardant disponibles pour les filtres. En option, un <strong>compteur d’enregistrements</strong> peut être affiché.</p>
|
||||
|
||||
<h3>Classer les données</h3>
|
||||
<h3>Classer les données</h3>
|
||||
|
||||
<p>Certains champs peuvent être proposés pour permettre de classer les données affichées.</p>
|
||||
<p>Certains champs peuvent être proposés pour permettre de classer les données affichées.</p>
|
||||
|
||||
<p>Par défaut, <strong>le classement se fait de manière alphabétique et « naturelle »</strong>, c’est-à-dire qu’en ordre ascendant « 20 » sera devant « 100 », malgré le fait que « 1 » se trouve devant « 2 »…</p>
|
||||
<p>Par défaut, <strong>le classement se fait de manière alphabétique et « naturelle »</strong>, c’est-à-dire qu’en ordre ascendant « 20 » sera devant « 100 », malgré le fait que « 1 » se trouve devant « 2 »…</p>
|
||||
|
||||
<p>Mais il est possible de <strong>fournir des fonctions spécifiques de classement</strong> pour certains champs, pour peu qu’elles soient compatibles avec <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/sort" target="_blank" title="Voir sur MDN (Mozilla)" rel="noopener">la fonction sort() de JavaScript</a>.</p>
|
||||
<p>Mais il est possible de <strong>fournir des fonctions spécifiques de classement</strong> pour certains champs, pour peu qu’elles soient compatibles avec <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/sort" target="_blank" title="Voir sur MDN (Mozilla)" rel="noopener">la fonction sort() de JavaScript</a>.</p>
|
||||
|
||||
<h3>Filtrer les données</h3>
|
||||
<h3>Filtrer les données</h3>
|
||||
|
||||
<p>Il peut être proposé à l’utilisateur de filtrer les données, via des listes <SELECT> reprenant les valeurs distinctes d’un champ, classées de la même manière que vu précédemment.</p>
|
||||
<p>Il peut être proposé à l’utilisateur de filtrer les données, via des listes <SELECT> reprenant les valeurs distinctes d’un champ, classées de la même manière que vu précédemment.</p>
|
||||
|
||||
<p>Si plusieurs filtres sont ainsi proposés, leurs actions s’additionnent, c’est-à-dire que <strong>seuls les enregistrements validant tous les filtres sélectionnés seront fournis en résultat</strong>.</p>
|
||||
<p>Si plusieurs filtres sont ainsi proposés, leurs actions s’additionnent, c’est-à-dire que <strong>seuls les enregistrements validant tous les filtres sélectionnés seront fournis en résultat</strong>.</p>
|
||||
|
||||
<h3>Moteur de recherche</h3>
|
||||
<h3>Moteur de recherche</h3>
|
||||
|
||||
<p>Un moteur de recherche peut aussi être proposé à l’utilisateur.<br />
|
||||
Il agit comme les filtres précédents, si ce n’est que <strong>la saisie est libre et que la recherche se fait sur plusieurs champs</strong>.</p>
|
||||
<p>Un moteur de recherche peut aussi être proposé à l’utilisateur.<br />
|
||||
Il agit comme les filtres précédents, si ce n’est que <strong>la saisie est libre et que la recherche se fait sur plusieurs champs</strong>.</p>
|
||||
|
||||
<p>Il est possible de définir les champs sur lesquels effectuer la recherche ou les garder tous (par défaut).</p>
|
||||
<p>Il est possible de définir les champs sur lesquels effectuer la recherche ou les garder tous (par défaut).</p>
|
||||
|
||||
<p>La recherche <strong>peut être lancée dès la saisie d’un certain nombre de caractères</strong>, ou attendre un clic sur le bouton d’envoi.</p>
|
||||
<p>La recherche <strong>peut être lancée dès la saisie d’un certain nombre de caractères</strong>, ou attendre un clic sur le bouton d’envoi.</p>
|
||||
|
||||
<h3>Pagination</h3>
|
||||
<h3>Pagination</h3>
|
||||
|
||||
<p>Une valeur de pagination peut être définie et/ou plusieurs <strong>options de pagination</strong> proposées aux utilisateurs finaux.</p>
|
||||
<p>Une valeur de pagination peut être définie et/ou plusieurs <strong>options de pagination</strong> proposées aux utilisateurs finaux.</p>
|
||||
|
||||
<h3>Adaptable à vos besoins</h3>
|
||||
<h3>Adaptable à vos besoins</h3>
|
||||
|
||||
<p><strong>Toutes les fonctionnalités de FreeDatas2HTML sont proposées en option.</strong></p>
|
||||
<p><strong>Toutes les fonctionnalités de FreeDatas2HTML sont proposées en option.</strong></p>
|
||||
|
||||
<p>Vous pouvez très bien n’utiliser FreeDatas2HTML que pour parser les données et en faire ensuite ce que bon vous semble…</p>
|
||||
<p>Vous pouvez très bien n’utiliser FreeDatas2HTML que pour parser les données et en faire ensuite ce que bon vous semble…</p>
|
||||
|
||||
<p>Vous pouvez écrire vos propres scripts pour <strong>remplacer n’importe quelle classe du projet</strong>, pour peu qu’il respecte son interface. Cela peut être assez simple, en vous inspirant de l’existant.</p>
|
||||
<p>Vous pouvez écrire vos propres scripts pour <strong>remplacer n’importe quelle classe du projet</strong>, pour peu qu’il respecte son interface. Cela peut être assez simple, en vous inspirant de l’existant.</p>
|
||||
|
||||
<p>FreeDatas2HTML est partagé <a href="https://forge.chapril.org/Fab_Blab/freeDatas2HTML/src/branch/master/LICENSE" target="_blank" title="Lire la licence" rel="noopener">sous licence AGPL</a>, ce qui vous donne le droit de modifier et partager son code, mais en gardant les mêmes droits (copyleft).</p>
|
||||
<p>FreeDatas2HTML est partagé <a href="https://forge.chapril.org/Fab_Blab/freeDatas2HTML/src/branch/master/LICENSE" target="_blank" title="Lire la licence" rel="noopener">sous licence AGPL</a>, ce qui vous donne le droit de modifier et partager son code, mais en gardant les mêmes droits (copyleft).</p>
|
||||
|
||||
<p>N’hésitez pas à me contacter pour me signaler un bug ou me demander de l’aide pour une intégration. Pas forcément gratuitement, dans le deuxième cas :-)</p>
|
||||
<p>N’hésitez pas à me contacter pour me signaler un bug ou me demander de l’aide pour une intégration. Pas forcément gratuitement, dans le deuxième cas :-)</p>
|
||||
|
||||
<h3>Code et dépendances</h3>
|
||||
<h3>Code et dépendances</h3>
|
||||
|
||||
<p>FreeDatas2HTML est écrit en <a href="https://www.typescriptlang.org/" target="_blank" title="Site du projet (en)" rel="noopener">TypeScript</a>, les tests étant réalisés via <a href="https://karma-runner.github.io/latest/index.html" title="Site du projet (en)" target="_blank" rel="noopener">Karma</a> et <a href="https://jasmine.github.io/" target="_blank" title="Site du projet (en)" rel="noopener">Jasmine</a> dans environnement Node/Webpack. Deux modules externes sont utilisés : <a href="https://www.papaparse.com" rel="noopener" target="_blank" title="Site du projet (en)">Papa Parse</a> pour parser les données CSV et <a href="https://www.npmjs.com/package/natural-orderby" rel="noopener" target="_blank" title="Page du projet sur NPM (en)">natural-orderby</a> pour optimiser le classement par défaut des données.</p>
|
||||
<p>FreeDatas2HTML est écrit en <a href="https://www.typescriptlang.org/" target="_blank" title="Site du projet (en)" rel="noopener">TypeScript</a>, les tests étant réalisés via <a href="https://karma-runner.github.io/latest/index.html" title="Site du projet (en)" target="_blank" rel="noopener">Karma</a> et <a href="https://jasmine.github.io/" target="_blank" title="Site du projet (en)" rel="noopener">Jasmine</a> dans environnement Node/Webpack. Deux modules externes sont utilisés : <a href="https://www.papaparse.com" rel="noopener" target="_blank" title="Site du projet (en)">Papa Parse</a> pour parser les données CSV et <a href="https://www.npmjs.com/package/natural-orderby" rel="noopener" target="_blank" title="Page du projet sur NPM (en)">natural-orderby</a> pour optimiser le classement par défaut des données.</p>
|
||||
|
||||
<p><a href="https://forge.chapril.org/Fab_Blab/freeDatas2HTML" target="_blank" title="accéder au dépôt GIT" rel="noopener" class="paper-btn btn-secondary">Accéder au dépôt GIT du projet.</a></p>
|
||||
</article>
|
||||
<p><a href="https://forge.chapril.org/Fab_Blab/freeDatas2HTML" target="_blank" title="accéder au dépôt GIT" rel="noopener" class="paper-btn btn-secondary">Accéder au dépôt GIT du projet.</a></p>
|
||||
</article>
|
||||
|
||||
<footer><p>Design basé sur <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a></p></footer>
|
||||
</body>
|
||||
<footer><p>Design basé sur <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a></p></footer>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,40 +1,41 @@
|
||||
<!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 du script freeDatas2HTML pour afficher les informations d'un fichier CSV dans une page web avec filtres, pagination, moteur de recherche.">
|
||||
<meta name="robots" content="noindex">
|
||||
<link rel="stylesheet" href="CSS/paper.min.css">
|
||||
<link rel="stylesheet" href="CSS/fd2html.css">
|
||||
<script src="JS/exampleWithUserFile.app.js" defer></script>
|
||||
<title>Afficher les données d'un fichier CSV dans une page web à l'aide de FreeDatas2HTML</title>
|
||||
</head>
|
||||
<body class="paper container">
|
||||
<h1>FreeDatas2HTML</h1>
|
||||
<h2>Afficher votre fichier CSV dans la page web</h2>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Exemple d'utilisation du script freeDatas2HTML pour afficher les informations d'un fichier CSV dans une page web avec filtres, pagination, moteur de recherche.">
|
||||
<meta name="robots" content="noindex">
|
||||
<link rel="stylesheet" href="CSS/paper.min.css">
|
||||
<link rel="stylesheet" href="CSS/fd2html.css">
|
||||
<script src="JS/exampleWithUserFile.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>Afficher les données d'un fichier CSV dans une page web à l'aide de FreeDatas2HTML</title>
|
||||
</head>
|
||||
<body class="paper container">
|
||||
<h1>FreeDatas2HTML</h1>
|
||||
<h2>Afficher votre fichier CSV dans la page web</h2>
|
||||
|
||||
<p>Cette page vous permet de tester directement freeDatas2HTML en affichant les données d'un fichier CSV de votre choix. Vous pourrez choisir les champs/colonnes à afficher. Suivant la taille de votre écran ou encore le nombre champs, le résultat peut être + ou - lisible... Sachez que FreeDatas2HTML permet d'afficher les données autrement que sous forme de tableau quan cela est plus pratique.</p>
|
||||
<p>Cette page vous permet de tester directement freeDatas2HTML en affichant les données d'un fichier CSV de votre choix. Vous pourrez choisir les champs/colonnes à afficher. Suivant la taille de votre écran ou encore le nombre champs, le résultat peut être + ou - lisible... Sachez que FreeDatas2HTML permet d'afficher les données autrement que sous forme de tableau quan cela est plus pratique.</p>
|
||||
|
||||
<form id="userSettings">
|
||||
<fieldset class="form-group">
|
||||
<label for="myFile">Sélectionnez votre fichier CSV :</label><input type="file" id="myFile" name="myFile" accept=".csv">
|
||||
</fieldset>
|
||||
<div id="displayOptions"></div>
|
||||
</form>
|
||||
<div class="row">
|
||||
<div id="paginationOptions" class="sm-12 md-6 lg-3 col"></div>
|
||||
<div id="search" class="sm-12 md-6 lg-9 col"></div>
|
||||
</div>
|
||||
<form id="userSettings">
|
||||
<fieldset class="form-group">
|
||||
<label for="myFile">Sélectionnez votre fichier CSV :</label><input type="file" id="myFile" name="myFile" accept=".csv">
|
||||
</fieldset>
|
||||
<div id="displayOptions"></div>
|
||||
</form>
|
||||
<div class="row">
|
||||
<div id="paginationOptions" class="sm-12 md-6 lg-3 col"></div>
|
||||
<div id="search" class="sm-12 md-6 lg-9 col"></div>
|
||||
</div>
|
||||
|
||||
<article id="datas"></article>
|
||||
<article id="datas"></article>
|
||||
|
||||
<p id="pages"></p>
|
||||
<p id="pages"></p>
|
||||
|
||||
<aside>
|
||||
<p>Pour rappel, freeDatas2HTML s'exécute uniquement côté client, c'est-à-dire dans votre navigateur. Les donnée de votre fichier ne sont donc pas envoyées sur un serveur. En conséquence, si vous partager cette page avec d'autres personnes, elles devront elles-mêmes sélectionner le fichier pour visualiser les données. Il est évidemment possible d'indiquer un fichier à afficher par défaut. C'est ce qui est fait dans les autres exemples présentés sur ce site.</p>
|
||||
</aside>
|
||||
<aside>
|
||||
<p>Pour rappel, freeDatas2HTML s'exécute uniquement côté client, c'est-à-dire dans votre navigateur. Les donnée de votre fichier ne sont donc pas envoyées sur un serveur. En conséquence, si vous partager cette page avec d'autres personnes, elles devront elles-mêmes sélectionner le fichier pour visualiser les données. Il est évidemment possible d'indiquer un fichier à afficher par défaut. C'est ce qui est fait dans les autres exemples présentés sur ce site.</p>
|
||||
</aside>
|
||||
|
||||
<footer><p>Design basé sur <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a></p></footer>
|
||||
</body>
|
||||
<footer><p>Design basé sur <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a></p></footer>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,42 +1,43 @@
|
||||
<!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 et afficher des données CSV via FreeDatas2HTML</title>
|
||||
</head>
|
||||
<body class="paper container">
|
||||
<h1>FreeDatas2HTML</h1>
|
||||
<h2>Parser et afficher des données CSV</h2>
|
||||
<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">
|
||||
<h1>FreeDatas2HTML</h1>
|
||||
<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>
|
||||
<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>
|
||||
<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 d’un champ ayant plusieurs valeurs par ligne</b>, ici séparées par une virgule, sachant que l’on peut désigner n’importe 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 d’afficher 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 800 px, 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>
|
||||
<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 d’un champ ayant plusieurs valeurs par ligne</b>, ici séparées par une virgule, sachant que l’on peut désigner n’importe 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 d’afficher 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 800 px, 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 basé sur <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a></p></footer>
|
||||
</body>
|
||||
<footer><p>Design basé sur <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a></p></footer>
|
||||
</body>
|
||||
</html>
|
||||
@ -8,6 +8,7 @@
|
||||
<link rel="stylesheet" href="CSS/paper.min.css">
|
||||
<link rel="stylesheet" href="CSS/fd2html.css">
|
||||
<script src="JS/exampleWithHTML.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 un tableau HTML via FreeDatas2HTML</title>
|
||||
</head>
|
||||
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
<link rel="stylesheet" href="CSS/paper.min.css">
|
||||
<link rel="stylesheet" href="CSS/fd2html.css">
|
||||
<script src="JS/exampleWithJSON.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 JSON via FreeDatas2HTML</title>
|
||||
</head>
|
||||
<body class="paper container">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user