Affichage de données pouvant provenir de différentes sources (fichier, API...) avec différents formats (CSV, JSON, HTML...) et possibilité de trier, filtrer ou encore paginer les données.
https://freedatas2html.le-fab-lab.com
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
2.3 KiB
51 lines
2.3 KiB
import { FreeDatas2HTML, Pagination, Render, SearchEngine, Selector, SortingField } from "../FreeDatas2HTML"; |
|
import { SortingFieldsStandAlone } from "../extensions/SortingFieldsStandAlone"; |
|
|
|
const initialise=async () => |
|
{ |
|
try |
|
{ |
|
// Création d'un convertisseur parsant les données d'un fichier CSV "distant" |
|
const converter=new FreeDatas2HTML("CSV"); |
|
converter.parser.setRemoteSource({ url:"https://freedatas2html.le-fab-lab.com/datas/elements-chimiques.csv" }); |
|
// Parsage des données, qui ne sont pas encore affichées : |
|
await converter.run(); |
|
// On affiche que certains champs : |
|
converter.fields2Rend=[0,1,2,3]; |
|
|
|
// Les données sont listées en dehors d'un tableau : |
|
const myRender=new Render(); |
|
myRender.settings= |
|
{ |
|
allBegining:"<h4>Liste des éléments chimiques :</h4>", |
|
allEnding:"", |
|
linesBegining:"<ul>", |
|
linesEnding:"</ul>", |
|
lineBegining:"<li><ul>", |
|
lineEnding:"</ul></li>", |
|
dataDisplaying:"<li><b>#FIELDNAME :</b> #VALUE</li>", |
|
}; |
|
converter.datasRender=myRender; |
|
|
|
// Désignation des champs permettant de classer les données en dehors de l'affichage des données |
|
let sortingField1=new SortingField(converter, 0); |
|
let sortingField2=new SortingField(converter, 1); |
|
let sortingField3=new SortingField(converter, 2); |
|
const allFields=new SortingFieldsStandAlone(converter,{ id:"classement" }); |
|
allFields.datasSortingFields=[sortingField1,sortingField2, sortingField3]; |
|
allFields.rendSettings.allBeginning="<h4>#LABEL</h4><ul>"; |
|
allFields.rend2HTML("Champ sur lequel classer les données :") ; |
|
|
|
// Affichage initial : |
|
converter.datasViewElt={ id:"datas" }; |
|
converter.refreshView(); |
|
} |
|
catch(e) |
|
{ |
|
console.error(e); |
|
document.getElementById("datas")!.innerHTML=`<div class="alert alert-warning">Désolé, mais un problème technique empêche l'affichage des données.</div>`; |
|
} |
|
} |
|
|
|
console.log("Hello, les dev !\nLe code source TypeScript utilisé pour faire fonctionner cette page est lisible ici : :\nhttps://forge.chapril.org/Fab_Blab/FreeDatas2HTML/src/branch/master/src/demo/exampleWithJSON.ts"); |
|
initialise(); |