Nouvelle version des pages d'exemples en vue créant du site de présentation.

This commit is contained in:
Fabrice PENHOËT 2021-11-05 18:32:00 +01:00
parent bc7a64a65f
commit 6c1ef358dd
15 changed files with 553 additions and 533 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -116,4 +116,4 @@ Z (numéro atomique),Élément,Symbole,Famille,Abondance des éléments dans la
115,Moscovium,Mc,Indéfinie,Inexistant,"Mot-clé9,Mot-clé8" 115,Moscovium,Mc,Indéfinie,Inexistant,"Mot-clé9,Mot-clé8"
116,Livermorium,Lv,Indéfinie,Inexistant,"Mot-clé9,Mot-clé7" 116,Livermorium,Lv,Indéfinie,Inexistant,"Mot-clé9,Mot-clé7"
117,Tennesse,Ts,Indéfinie,Inexistant,"Mot-clé9,Mot-clé6" 117,Tennesse,Ts,Indéfinie,Inexistant,"Mot-clé9,Mot-clé6"
118,Oganesson,Og,Indéfinie,Inexistant,Mot-clé10 118,Oganesson,Og,Indéfinie,Inexistant,Mot-clé10

1 Z (numéro atomique) Élément Symbole Famille Abondance des éléments dans la croûte terrestre (μg/k) Mots-clés
116 115 Moscovium Mc Indéfinie Inexistant Mot-clé9,Mot-clé8
117 116 Livermorium Lv Indéfinie Inexistant Mot-clé9,Mot-clé7
118 117 Tennesse Ts Indéfinie Inexistant Mot-clé9,Mot-clé6
119 118 Oganesson Og Indéfinie Inexistant Mot-clé10

View File

@ -0,0 +1,278 @@
Rang en 2011,Commune,Département,Région,Population 2018,Population 1990,Population 1968
1,Paris,,Île-de-France,2175601,2152423,2590771
2,Marseille,Bouches-du-Rhône,Provence-Alpes-Côte d'Azur,868277,800550,889029
3,Lyon,Métropole de Lyon,Auvergne-Rhône-Alpes,518635,415487,527800
4,Toulouse,Haute-Garonne,Occitanie,486828,358688,370796
5,Nice,Alpes-Maritimes,Provence-Alpes-Côte d'Azur,341032,342439,322442
6,Nantes,Loire-Atlantique,Pays de la Loire,314138,244995,259208
7,Montpellier,Hérault,Occitanie,290053,207996,161910
8,Strasbourg,Bas-Rhin,Grand Est,284677,252338,249396
9,Bordeaux,Gironde,Nouvelle-Aquitaine,257068,210336,266662
10,Lille,Nord,Hauts-de-France,233098,172142,190546
11,Rennes,Ille-et-Vilaine,Bretagne,217728,197536,180943
12,Reims,Marne,Grand Est,182211,180620,152967
13,Toulon,Var,Provence-Alpes-Côte d'Azur,176198,167619,174746
14,Saint-Étienne,Loire,Auvergne-Rhône-Alpes,173089,199396,223223
15,Le Havre,Seine-Maritime,Normandie,169733,195854,199509
16,Grenoble,Isère,Auvergne-Rhône-Alpes,157650,150758,161616
17,Dijon,Côte-d'Or,Bourgogne-Franche-Comté,156854,146703,145357
18,Angers,Maine-et-Loire,Pays de la Loire,154508,141404,128533
19,Villeurbanne,Métropole de Lyon,Auvergne-Rhône-Alpes,150659,116872,119879
20,Saint-Denis,La Réunion,La Réunion,150535,121999,85444
21,Nîmes,Gard,Occitanie,149633,128471,123292
22,Clermont-Ferrand,Puy-de-Dôme,Auvergne-Rhône-Alpes,146734,136181,148896
23,Le Mans,Sarthe,Pays de la Loire,143252,145502,143246
24,Aix-en-Provence,Bouches-du-Rhône,Provence-Alpes-Côte d'Azur,143097,123842,89566
25,Brest,Finistère,Bretagne,139602,147956,154023
26,Tours,Indre-et-Loire,Centre-Val de Loire,136463,129509,128120
27,Amiens,Somme,Hauts-de-France,133891,131872,117888
28,Limoges,Haute-Vienne,Nouvelle-Aquitaine,131479,133464,132935
29,Annecy,Haute-Savoie,Auvergne-Rhône-Alpes,128199,49644,54484
30,Boulogne-Billancourt,Hauts-de-Seine,Île-de-France,121334,101743,109008
31,Perpignan,Pyrénées-Orientales,Occitanie,119188,105983,102191
32,Besançon,Doubs,Bourgogne-Franche-Comté,116775,113828,113220
33,Metz,Moselle,Grand Est,116581,119594,107537
34,Orléans,Loiret,Centre-Val de Loire,116238,105111,95828
35,Saint-Denis,Seine-Saint-Denis,Île-de-France,112091,89988,99268
36,Rouen,Seine-Maritime,Normandie,111360,102723,120471
37,Argenteuil,Val-d'Oise,Île-de-France,110213,93096,90480
38,Montreuil,Seine-Saint-Denis,Île-de-France,109914,94754,95714
39,Mulhouse,Haut-Rhin,Grand Est,108942,108357,116336
40,Caen,Calvados,Normandie,105512,112846,110262
41,Nancy,Meurthe-et-Moselle,Grand Est,104885,99351,123428
42,Saint-Paul,La Réunion,La Réunion,103492,71669,43129
43,Roubaix,Nord,Hauts-de-France,98089,97746,114547
44,Tourcoing,Nord,Hauts-de-France,97442,93765,98755
45,Nanterre,Hauts-de-Seine,Île-de-France,96807,84565,90332
46,Vitry-sur-Seine,Val-de-Marne,Île-de-France,94649,82400,77846
47,Créteil,Val-de-Marne,Île-de-France,92265,82088,49197
48,Avignon,Vaucluse,Provence-Alpes-Côte d'Azur,91729,86939,86096
49,Poitiers,Vienne,Nouvelle-Aquitaine,88665,78894,70681
50,Aubervilliers,Seine-Saint-Denis,Île-de-France,87572,67557,73695
51,Dunkerque,Nord,Hauts-de-France,86865,70331,27504
52,Aulnay-sous-Bois,Seine-Saint-Denis,Île-de-France,86278,82314,61521
53,Colombes,Hauts-de-Seine,Île-de-France,86052,78513,80357
54,Asnières-sur-Seine,Hauts-de-Seine,Île-de-France,85946,71850,80113
55,Versailles,Yvelines,Île-de-France,85205,87789,90829
56,Saint-Pierre,La Réunion,La Réunion,84961,58846,40355
57,Courbevoie,Hauts-de-Seine,Île-de-France,82198,65389,58118
58,Le Tampon,La Réunion,La Réunion,79385,47593,31378
59,Cherbourg-en-Cotentin,Manche,Normandie,79144,27121,38243
60,Fort-de-France,Martinique,Martinique,78126,100080,96943
61,Rueil-Malmaison,Hauts-de-Seine,Île-de-France,77986,66401,60804
62,Béziers,Hérault,Occitanie,77599,70996,80492
63,Champigny-sur-Marne,Val-de-Marne,Île-de-France,77039,79486,70419
64,Pau,Pyrénées-Atlantiques,Nouvelle-Aquitaine,76275,82157,74005
65,La Rochelle,Charente-Maritime,Nouvelle-Aquitaine,76114,71094,73347
66,Saint-Maur-des-Fossés,Val-de-Marne,Île-de-France,75298,77206,77251
67,Cannes,Alpes-Maritimes,Provence-Alpes-Côte d'Azur,73965,68676,67152
68,Calais,Pas-de-Calais,Hauts-de-France,72929,75309,74624
69,Antibes,Alpes-Maritimes,Provence-Alpes-Côte d'Azur,72915,70005,47547
70,Drancy,Seine-Saint-Denis,Île-de-France,72109,60707,64430
71,Ajaccio,Corse-du-Sud,Corse,70817,58949,43438
72,Mérignac,Gironde,Nouvelle-Aquitaine,70813,57273,45951
73,Saint-Nazaire,Loire-Atlantique,Pays de la Loire,70619,64812,63289
74,Colmar,Haut-Rhin,Grand Est,68703,63498,59550
75,Issy-les-Moulineaux,Hauts-de-Seine,Île-de-France,68260,46127,50442
76,Noisy-le-Grand,Seine-Saint-Denis,Île-de-France,68126,54032,25440
77,Évry-Courcouronnes,Essonne,Île-de-France,67131,45531,7113
78,Vénissieux,Métropole de Lyon,Auvergne-Rhône-Alpes,67129,60444,47613
79,Cergy,Val-d'Oise,Île-de-France,66322,48226,2203
80,Levallois-Perret,Hauts-de-Seine,Île-de-France,65817,47548,58941
81,Valence,Drôme,Auvergne-Rhône-Alpes,64726,63437,62358
82,Bourges,Cher,Centre-Val de Loire,64668,75609,70814
83,Pessac,Gironde,Nouvelle-Aquitaine,64374,51055,36986
84,Cayenne,Guyane,Guyane,63652,41067,24518
85,Ivry-sur-Seine,Val-de-Marne,Île-de-France,63309,53619,60455
86,Quimper,Finistère,Bretagne,63166,59437,52496
87,La Seyne-sur-Mer,Var,Provence-Alpes-Côte d'Azur,62888,59968,43783
88,Antony,Hauts-de-Seine,Île-de-France,62858,57771,56638
89,Villeneuve-d'Ascq,Nord,Hauts-de-France,62727,65320,11618
90,Clichy,Hauts-de-Seine,Île-de-France,62485,48030,52477
91,Troyes,Aube,Grand Est,61996,59255,74898
92,Montauban,Tarn-et-Garonne,Occitanie,60952,51224,45895
93,Neuilly-sur-Seine,Hauts-de-Seine,Île-de-France,59940,61768,70995
94,Pantin,Seine-Saint-Denis,Île-de-France,59060,47303,47607
95,Niort,Deux-Sèvres,Nouvelle-Aquitaine,59059,57012,48469
96,Chambéry,Savoie,Auvergne-Rhône-Alpes,58833,54120,51066
97,Sarcelles,Val-d'Oise,Île-de-France,58811,56833,51674
98,Le Blanc-Mesnil,Seine-Saint-Denis,Île-de-France,57150,46956,48487
99,Lorient,Morbihan,Bretagne,57084,59271,66444
100,Saint-André,La Réunion,La Réunion,56747,35049,22094
101,Beauvais,Oise,Hauts-de-France,56605,54190,46777
102,Maisons-Alfort,Val-de-Marne,Île-de-France,55899,53375,53149
103,Meaux,Seine-et-Marne,Île-de-France,55416,48305,30167
104,Narbonne,Aude,Occitanie,55375,45849,38441
105,Chelles,Seine-et-Marne,Île-de-France,55148,45365,33281
106,Hyères,Var,Provence-Alpes-Côte d'Azur,55069,48043,34875
107,Villejuif,Val-de-Marne,Île-de-France,54964,48405,51120
108,Épinay-sur-Seine,Seine-Saint-Denis,Île-de-France,54771,48762,41774
109,La Roche-sur-Yon,Vendée,Pays de la Loire,54766,45219,36067
110,Bobigny,Seine-Saint-Denis,Île-de-France,54272,44659,39453
111,Cholet,Maine-et-Loire,Pays de la Loire,54186,55132,41766
112,Bondy,Seine-Saint-Denis,Île-de-France,54055,46676,51652
113,Saint-Quentin,Aisne,Hauts-de-France,53856,60644,64196
114,Fréjus,Var,Provence-Alpes-Côte d'Azur,53786,41486,23629
115,Saint-Louis,La Réunion,La Réunion,53589,37420,26663
116,Vannes,Morbihan,Bretagne,53438,45644,36576
117,Les Abymes,Guadeloupe,Guadeloupe,53082,62605,39911
118,Clamart,Hauts-de-Seine,Île-de-France,52926,47227,54906
119,Sartrouville,Yvelines,Île-de-France,52269,50329,40277
120,Fontenay-sous-Bois,Val-de-Marne,Île-de-France,52256,51868,38962
121,Cagnes-sur-Mer,Alpes-Maritimes,Provence-Alpes-Côte d'Azur,51411,40902,22110
122,Bayonne,Pyrénées-Atlantiques,Nouvelle-Aquitaine,51411,40051,42743
123,Sevran,Seine-Saint-Denis,Île-de-France,51225,48478,20253
124,Arles,Bouches-du-Rhône,Provence-Alpes-Côte d'Azur,51031,52058,45774
125,Corbeil-Essonnes,Essonne,Île-de-France,50954,40345,32192
126,Vaulx-en-Velin,Métropole de Lyon,Auvergne-Rhône-Alpes,50823,44174,20726
127,Saint-Ouen-sur-Seine,Seine-Saint-Denis,Île-de-France,50670,42343,48886
128,Massy,Essonne,Île-de-France,50632,38574,37055
129,Vincennes,Val-de-Marne,Île-de-France,49635,42267,49143
130,Laval,Mayenne,Pays de la Loire,49573,50473,45674
131,Albi,Tarn,Occitanie,48993,46579,42930
132,Grasse,Alpes-Maritimes,Provence-Alpes-Côte d'Azur,48865,41388,30907
133,Suresnes,Hauts-de-Seine,Île-de-France,48763,35998,40616
134,Montrouge,Hauts-de-Seine,Île-de-France,48734,38106,44922
135,Martigues,Bouches-du-Rhône,Provence-Alpes-Côte d'Azur,48420,42678,27945
136,Bastia,Haute-Corse,Corse,48044,37845,38746
137,Gennevilliers,Hauts-de-Seine,Île-de-France,47702,44818,46074
138,Aubagne,Bouches-du-Rhône,Provence-Alpes-Côte d'Azur,47208,41100,27938
139,Belfort,Territoire de Belfort,Bourgogne-Franche-Comté,46954,50125,53214
140,Évreux,Eure,Normandie,46707,49103,42550
141,Brive-la-Gaillarde,Corrèze,Nouvelle-Aquitaine,46630,49765,46561
142,Carcassonne,Aude,Occitanie,46513,43470,43616
143,Saint-Priest,Métropole de Lyon,Auvergne-Rhône-Alpes,46510,41876,20419
144,Saint-Malo,Ille-et-Vilaine,Bretagne,46478,48057,42297
145,Charleville-Mézières,Ardennes,Grand Est,46391,57008,55543
146,Saint-Herblain,Loire-Atlantique,Pays de la Loire,46352,42774,18604
147,Choisy-le-Roi,Val-de-Marne,Île-de-France,46154,34068,41440
148,Rosny-sous-Bois,Seine-Saint-Denis,Île-de-France,46043,37489,30705
149,Blois,Loir-et-Cher,Centre-Val de Loire,45871,49318,42264
150,Meudon,Hauts-de-Seine,Île-de-France,45748,45339,50623
151,Saint-Laurent-du-Maroni,Guyane,Guyane,45576,13616,5031
152,Salon-de-Provence,Bouches-du-Rhône,Provence-Alpes-Côte d'Azur,45400,34054,30722
153,Livry-Gargan,Seine-Saint-Denis,Île-de-France,45012,35387,32063
154,Puteaux,Hauts-de-Seine,Île-de-France,44837,42756,37946
155,Chalon-sur-Saône,Saône-et-Loire,Bourgogne-Franche-Comté,44810,54575,50589
156,Saint-Germain-en-Laye,Yvelines,Île-de-France,44750,39926,38308
157,Les Sables-d'Olonne,Vendée,Pays de la Loire,44355,15830,18093
158,Alfortville,Val-de-Marne,Île-de-France,44287,36119,35023
159,Châlons-en-Champagne,Marne,Grand Est,44246,48423,50764
160,Mantes-la-Jolie,Yvelines,Île-de-France,44227,45087,26058
161,Noisy-le-Sec,Seine-Saint-Denis,Île-de-France,44223,36309,34079
162,Saint-Brieuc,Côtes-d'Armor,Bretagne,44170,44752,50281
163,La Courneuve,Seine-Saint-Denis,Île-de-France,43946,34139,43318
164,Sète,Hérault,Occitanie,43686,41510,40476
165,Châteauroux,Indre,Centre-Val de Loire,43442,50969,49138
166,Istres,Bouches-du-Rhône,Provence-Alpes-Côte d'Azur,43411,35163,13404
167,Valenciennes,Nord,Hauts-de-France,43405,38441,46626
168,Garges-lès-Gonesse,Val-d'Oise,Île-de-France,42956,42144,27312
169,Caluire-et-Cuire,Métropole de Lyon,Auvergne-Rhône-Alpes,42847,41311,37603
170,Talence,Gironde,Nouvelle-Aquitaine,42701,34485,29161
171,Tarbes,Hautes-Pyrénées,Occitanie,42426,47566,55375
172,Rezé,Loire-Atlantique,Pays de la Loire,42368,33262,33509
173,Bron,Métropole de Lyon,Auvergne-Rhône-Alpes,42216,39683,41619
174,Castres,Tarn,Occitanie,41795,44812,40457
175,Angoulême,Charente,Nouvelle-Aquitaine,41711,42876,47822
176,Arras,Pas-de-Calais,Hauts-de-France,41555,38983,49144
177,Le Cannet,Alpes-Maritimes,Provence-Alpes-Côte d'Azur,41471,41842,23231
178,Bourg-en-Bresse,Ain,Auvergne-Rhône-Alpes,41248,40972,37887
179,Wattrelos,Nord,Hauts-de-France,40885,43675,43754
180,Bagneux,Hauts-de-Seine,Île-de-France,40812,36364,42006
181,Alès,Gard,Occitanie,40802,41037,42818
182,Boulogne-sur-Mer,Pas-de-Calais,Hauts-de-France,40664,43678,49276
183,Le Lamentin,Martinique,Martinique,40581,30028,18553
184,Gap,Hautes-Alpes,Provence-Alpes-Côte d'Azur,40559,33444,23994
185,Compiègne,Oise,Hauts-de-France,40542,41896,29700
186,Thionville,Moselle,Grand Est,40477,39712,37079
187,Melun,Seine-et-Marne,Île-de-France,39947,35319,34518
188,Douai,Nord,Hauts-de-France,39634,42175,49187
189,Gagny,Seine-Saint-Denis,Île-de-France,39618,36059,35780
190,Anglet,Pyrénées-Atlantiques,Nouvelle-Aquitaine,39604,33041,21190
191,Montélimar,Drôme,Auvergne-Rhône-Alpes,39415,29982,26748
192,Draguignan,Var,Provence-Alpes-Côte d'Azur,39106,30183,18376
193,Colomiers,Haute-Garonne,Occitanie,39097,26979,10584
194,Stains,Seine-Saint-Denis,Île-de-France,38666,34879,32169
195,Marcq-en-Barœul,Nord,Hauts-de-France,38570,36601,35136
196,Chartres,Eure-et-Loir,Centre-Val de Loire,38426,39595,34469
197,Saint-Martin-d'Hères,Isère,Auvergne-Rhône-Alpes,38398,34341,33605
198,Poissy,Yvelines,Île-de-France,38313,36745,33555
199,Joué-lès-Tours,Indre-et-Loire,Centre-Val de Loire,38250,36798,17826
200,Pontault-Combault,Seine-et-Marne,Île-de-France,37867,26804,9282
201,Saint-Joseph,La Réunion,La Réunion,37517,25630,22361
202,Villepinte,Seine-Saint-Denis,Île-de-France,37280,30303,12103
203,Saint-Benoît,La Réunion,La Réunion,37274,26187,19492
204,Châtillon,Hauts-de-Seine,Île-de-France,37010,26411,24640
205,Franconville,Val-d'Oise,Île-de-France,37010,33802,16205
206,Échirolles,Isère,Auvergne-Rhône-Alpes,36961,34435,15429
207,Savigny-sur-Orge,Essonne,Île-de-France,36734,33295,32075
208,Villefranche-sur-Saône,Rhône,Auvergne-Rhône-Alpes,36288,29542,26338
209,Annemasse,Haute-Savoie,Auvergne-Rhône-Alpes,36250,27669,17166
210,Tremblay-en-France,Seine-Saint-Denis,Île-de-France,36230,31385,26846
211,Sainte-Geneviève-des-Bois,Essonne,Île-de-France,36015,31286,23684
212,Creil,Oise,Hauts-de-France,35800,31956,32544
213,Neuilly-sur-Marne,Seine-Saint-Denis,Île-de-France,35680,31461,22543
214,Conflans-Sainte-Honorine,Yvelines,Île-de-France,35656,31467,26304
215,Saint-Raphaël,Var,Provence-Alpes-Côte d'Azur,35633,26616,17844
216,Palaiseau,Essonne,Île-de-France,35590,28395,23343
217,Bagnolet,Seine-Saint-Denis,Île-de-France,35442,32600,34038
218,La Ciotat,Bouches-du-Rhône,Provence-Alpes-Côte d'Azur,35281,30620,23916
219,Villenave-d'Ornon,Gironde,Nouvelle-Aquitaine,35278,25609,21263
220,Thonon-les-Bains,Haute-Savoie,Auvergne-Rhône-Alpes,35241,29677,20700
221,Athis-Mons,Essonne,Île-de-France,35101,29123,27640
222,Saint-Chamond,Loire,Auvergne-Rhône-Alpes,34979,38878,37728
223,Montluçon,Allier,Auvergne-Rhône-Alpes,34938,44248,57871
224,Haguenau,Bas-Rhin,Grand Est,34789,27675,22944
225,Auxerre,Yonne,Bourgogne-Franche-Comté,34764,38819,35784
226,Villeneuve-Saint-Georges,Val-de-Marne,Île-de-France,34607,26952,30488
227,Saint-Leu,La Réunion,La Réunion,34196,20931,16870
228,Châtenay-Malabry,Hauts-de-Seine,Île-de-France,34170,29197,27484
229,Meyzieu,Métropole de Lyon,Auvergne-Rhône-Alpes,34151,28077,10012
230,Saint-Martin,Saint-Martin est une collectivité d'outre-mer,,34065,28518,4992
231,Roanne,Loire,Auvergne-Rhône-Alpes,34004,41756,53373
232,Mâcon,Saône-et-Loire,Bourgogne-Franche-Comté,33810,37275,33445
233,Le Perreux-sur-Marne,Val-de-Marne,Île-de-France,33793,28477,29099
234,Six-Fours-les-Plages,Var,Provence-Alpes-Côte d'Azur,33665,28957,15118
235,Le Port,La Réunion,La Réunion,33531,34692,19768
236,Nevers,Nièvre,Bourgogne-Franche-Comté,33279,41968,42422
237,Sainte-Marie,La Réunion,La Réunion,33234,20158,14367
238,Romans-sur-Isère,Drôme,Auvergne-Rhône-Alpes,33160,32734,31545
239,Vitrolles,Bouches-du-Rhône,Provence-Alpes-Côte d'Azur,33101,35397,5058
240,Schiltigheim,Bas-Rhin,Grand Est,33069,29155,29198
241,Agen,Lot-et-Garonne,Nouvelle-Aquitaine,33012,30553,34949
242,Les Mureaux,Yvelines,Île-de-France,32949,33089,21733
243,Matoury,Guyane,Guyane,32942,10152,567
244,Nogent-sur-Marne,Val-de-Marne,Île-de-France,32922,25248,26238
245,Marignane,Bouches-du-Rhône,Provence-Alpes-Côte d'Azur,32793,32325,20044
246,La Possession,La Réunion,La Réunion,32633,15614,7626
247,Montigny-le-Bretonneux,Yvelines,Île-de-France,32575,31687,768
248,Cambrai,Nord,Hauts-de-France,32501,33092,37532
249,Houilles,Yvelines,Île-de-France,32449,29650,29338
250,Épinal,Vosges,Grand Est,32223,36732,36856
251,Trappes,Yvelines,Île-de-France,32120,30878,16799
252,Châtellerault,Vienne,Nouvelle-Aquitaine,31733,34678,35337
253,Lens,Pas-de-Calais,Hauts-de-France,31606,35017,41874
254,Saint-Médard-en-Jalles,Gironde,Nouvelle-Aquitaine,31536,22064,8955
255,Vigneux-sur-Seine,Essonne,Île-de-France,31463,25203,22577
256,Pontoise,Val-d'Oise,Île-de-France,31422,27150,17509
257,L'Haÿ-les-Roses,Val-de-Marne,Île-de-France,31417,29746,24352
258,Le Chesnay-Rocquencourt,Yvelines,Île-de-France,31306,29542,14184
259,Baie-Mahault,Guadeloupe,Guadeloupe,31193,15036,7398
260,Plaisir,Yvelines,Île-de-France,31013,25877,6871
261,Cachan,Val-de-Marne,Île-de-France,30884,24266,26187
262,Pierrefitte-sur-Seine,Seine-Saint-Denis,Île-de-France,30828,23822,19017
263,Malakoff,Hauts-de-Seine,Île-de-France,30711,30959,36198
264,Viry-Châtillon,Essonne,Île-de-France,30706,30580,27045
265,Dreux,Eure-et-Loir,Centre-Val de Loire,30664,35230,29408
266,Goussainville,Val-d'Oise,Île-de-France,30642,24812,16097
267,Bezons,Val-d'Oise,Île-de-France,30484,25680,24475
268,Liévin,Pas-de-Calais,Hauts-de-France,30423,33623,35853
269,Rillieux-la-Pape,Métropole de Lyon,Auvergne-Rhône-Alpes,30410,30791,9591
270,Chatou,Yvelines,Île-de-France,30330,27977,22619
271,Menton,Alpes-Maritimes,Provence-Alpes-Côte d'Azur,30231,29141,25040
272,Herblay-sur-Seine,Val-d'Oise,Île-de-France,30095,22135,12264
273,Périgueux,Dordogne,Nouvelle-Aquitaine,30060,30280,37450
274,Charenton-le-Pont,Val-de-Marne,Île-de-France,30053,21872,22300
275,Saint-Cloud,Hauts-de-Seine,Île-de-France,30038,28597,28158
276,Vandœuvre-lès-Nancy,Meurthe-et-Moselle,Grand Est,30009,34105,19686
277,Villemomble,Seine-Saint-Denis,Île-de-France,30005,26863,28756
1 Rang en 2011 Commune Département Région Population 2018 Population 1990 Population 1968
2 1 Paris Île-de-France 2175601 2152423 2590771
3 2 Marseille Bouches-du-Rhône Provence-Alpes-Côte d'Azur 868277 800550 889029
4 3 Lyon Métropole de Lyon Auvergne-Rhône-Alpes 518635 415487 527800
5 4 Toulouse Haute-Garonne Occitanie 486828 358688 370796
6 5 Nice Alpes-Maritimes Provence-Alpes-Côte d'Azur 341032 342439 322442
7 6 Nantes Loire-Atlantique Pays de la Loire 314138 244995 259208
8 7 Montpellier Hérault Occitanie 290053 207996 161910
9 8 Strasbourg Bas-Rhin Grand Est 284677 252338 249396
10 9 Bordeaux Gironde Nouvelle-Aquitaine 257068 210336 266662
11 10 Lille Nord Hauts-de-France 233098 172142 190546
12 11 Rennes Ille-et-Vilaine Bretagne 217728 197536 180943
13 12 Reims Marne Grand Est 182211 180620 152967
14 13 Toulon Var Provence-Alpes-Côte d'Azur 176198 167619 174746
15 14 Saint-Étienne Loire Auvergne-Rhône-Alpes 173089 199396 223223
16 15 Le Havre Seine-Maritime Normandie 169733 195854 199509
17 16 Grenoble Isère Auvergne-Rhône-Alpes 157650 150758 161616
18 17 Dijon Côte-d'Or Bourgogne-Franche-Comté 156854 146703 145357
19 18 Angers Maine-et-Loire Pays de la Loire 154508 141404 128533
20 19 Villeurbanne Métropole de Lyon Auvergne-Rhône-Alpes 150659 116872 119879
21 20 Saint-Denis La Réunion La Réunion 150535 121999 85444
22 21 Nîmes Gard Occitanie 149633 128471 123292
23 22 Clermont-Ferrand Puy-de-Dôme Auvergne-Rhône-Alpes 146734 136181 148896
24 23 Le Mans Sarthe Pays de la Loire 143252 145502 143246
25 24 Aix-en-Provence Bouches-du-Rhône Provence-Alpes-Côte d'Azur 143097 123842 89566
26 25 Brest Finistère Bretagne 139602 147956 154023
27 26 Tours Indre-et-Loire Centre-Val de Loire 136463 129509 128120
28 27 Amiens Somme Hauts-de-France 133891 131872 117888
29 28 Limoges Haute-Vienne Nouvelle-Aquitaine 131479 133464 132935
30 29 Annecy Haute-Savoie Auvergne-Rhône-Alpes 128199 49644 54484
31 30 Boulogne-Billancourt Hauts-de-Seine Île-de-France 121334 101743 109008
32 31 Perpignan Pyrénées-Orientales Occitanie 119188 105983 102191
33 32 Besançon Doubs Bourgogne-Franche-Comté 116775 113828 113220
34 33 Metz Moselle Grand Est 116581 119594 107537
35 34 Orléans Loiret Centre-Val de Loire 116238 105111 95828
36 35 Saint-Denis Seine-Saint-Denis Île-de-France 112091 89988 99268
37 36 Rouen Seine-Maritime Normandie 111360 102723 120471
38 37 Argenteuil Val-d'Oise Île-de-France 110213 93096 90480
39 38 Montreuil Seine-Saint-Denis Île-de-France 109914 94754 95714
40 39 Mulhouse Haut-Rhin Grand Est 108942 108357 116336
41 40 Caen Calvados Normandie 105512 112846 110262
42 41 Nancy Meurthe-et-Moselle Grand Est 104885 99351 123428
43 42 Saint-Paul La Réunion La Réunion 103492 71669 43129
44 43 Roubaix Nord Hauts-de-France 98089 97746 114547
45 44 Tourcoing Nord Hauts-de-France 97442 93765 98755
46 45 Nanterre Hauts-de-Seine Île-de-France 96807 84565 90332
47 46 Vitry-sur-Seine Val-de-Marne Île-de-France 94649 82400 77846
48 47 Créteil Val-de-Marne Île-de-France 92265 82088 49197
49 48 Avignon Vaucluse Provence-Alpes-Côte d'Azur 91729 86939 86096
50 49 Poitiers Vienne Nouvelle-Aquitaine 88665 78894 70681
51 50 Aubervilliers Seine-Saint-Denis Île-de-France 87572 67557 73695
52 51 Dunkerque Nord Hauts-de-France 86865 70331 27504
53 52 Aulnay-sous-Bois Seine-Saint-Denis Île-de-France 86278 82314 61521
54 53 Colombes Hauts-de-Seine Île-de-France 86052 78513 80357
55 54 Asnières-sur-Seine Hauts-de-Seine Île-de-France 85946 71850 80113
56 55 Versailles Yvelines Île-de-France 85205 87789 90829
57 56 Saint-Pierre La Réunion La Réunion 84961 58846 40355
58 57 Courbevoie Hauts-de-Seine Île-de-France 82198 65389 58118
59 58 Le Tampon La Réunion La Réunion 79385 47593 31378
60 59 Cherbourg-en-Cotentin Manche Normandie 79144 27121 38243
61 60 Fort-de-France Martinique Martinique 78126 100080 96943
62 61 Rueil-Malmaison Hauts-de-Seine Île-de-France 77986 66401 60804
63 62 Béziers Hérault Occitanie 77599 70996 80492
64 63 Champigny-sur-Marne Val-de-Marne Île-de-France 77039 79486 70419
65 64 Pau Pyrénées-Atlantiques Nouvelle-Aquitaine 76275 82157 74005
66 65 La Rochelle Charente-Maritime Nouvelle-Aquitaine 76114 71094 73347
67 66 Saint-Maur-des-Fossés Val-de-Marne Île-de-France 75298 77206 77251
68 67 Cannes Alpes-Maritimes Provence-Alpes-Côte d'Azur 73965 68676 67152
69 68 Calais Pas-de-Calais Hauts-de-France 72929 75309 74624
70 69 Antibes Alpes-Maritimes Provence-Alpes-Côte d'Azur 72915 70005 47547
71 70 Drancy Seine-Saint-Denis Île-de-France 72109 60707 64430
72 71 Ajaccio Corse-du-Sud Corse 70817 58949 43438
73 72 Mérignac Gironde Nouvelle-Aquitaine 70813 57273 45951
74 73 Saint-Nazaire Loire-Atlantique Pays de la Loire 70619 64812 63289
75 74 Colmar Haut-Rhin Grand Est 68703 63498 59550
76 75 Issy-les-Moulineaux Hauts-de-Seine Île-de-France 68260 46127 50442
77 76 Noisy-le-Grand Seine-Saint-Denis Île-de-France 68126 54032 25440
78 77 Évry-Courcouronnes Essonne Île-de-France 67131 45531 7113
79 78 Vénissieux Métropole de Lyon Auvergne-Rhône-Alpes 67129 60444 47613
80 79 Cergy Val-d'Oise Île-de-France 66322 48226 2203
81 80 Levallois-Perret Hauts-de-Seine Île-de-France 65817 47548 58941
82 81 Valence Drôme Auvergne-Rhône-Alpes 64726 63437 62358
83 82 Bourges Cher Centre-Val de Loire 64668 75609 70814
84 83 Pessac Gironde Nouvelle-Aquitaine 64374 51055 36986
85 84 Cayenne Guyane Guyane 63652 41067 24518
86 85 Ivry-sur-Seine Val-de-Marne Île-de-France 63309 53619 60455
87 86 Quimper Finistère Bretagne 63166 59437 52496
88 87 La Seyne-sur-Mer Var Provence-Alpes-Côte d'Azur 62888 59968 43783
89 88 Antony Hauts-de-Seine Île-de-France 62858 57771 56638
90 89 Villeneuve-d'Ascq Nord Hauts-de-France 62727 65320 11618
91 90 Clichy Hauts-de-Seine Île-de-France 62485 48030 52477
92 91 Troyes Aube Grand Est 61996 59255 74898
93 92 Montauban Tarn-et-Garonne Occitanie 60952 51224 45895
94 93 Neuilly-sur-Seine Hauts-de-Seine Île-de-France 59940 61768 70995
95 94 Pantin Seine-Saint-Denis Île-de-France 59060 47303 47607
96 95 Niort Deux-Sèvres Nouvelle-Aquitaine 59059 57012 48469
97 96 Chambéry Savoie Auvergne-Rhône-Alpes 58833 54120 51066
98 97 Sarcelles Val-d'Oise Île-de-France 58811 56833 51674
99 98 Le Blanc-Mesnil Seine-Saint-Denis Île-de-France 57150 46956 48487
100 99 Lorient Morbihan Bretagne 57084 59271 66444
101 100 Saint-André La Réunion La Réunion 56747 35049 22094
102 101 Beauvais Oise Hauts-de-France 56605 54190 46777
103 102 Maisons-Alfort Val-de-Marne Île-de-France 55899 53375 53149
104 103 Meaux Seine-et-Marne Île-de-France 55416 48305 30167
105 104 Narbonne Aude Occitanie 55375 45849 38441
106 105 Chelles Seine-et-Marne Île-de-France 55148 45365 33281
107 106 Hyères Var Provence-Alpes-Côte d'Azur 55069 48043 34875
108 107 Villejuif Val-de-Marne Île-de-France 54964 48405 51120
109 108 Épinay-sur-Seine Seine-Saint-Denis Île-de-France 54771 48762 41774
110 109 La Roche-sur-Yon Vendée Pays de la Loire 54766 45219 36067
111 110 Bobigny Seine-Saint-Denis Île-de-France 54272 44659 39453
112 111 Cholet Maine-et-Loire Pays de la Loire 54186 55132 41766
113 112 Bondy Seine-Saint-Denis Île-de-France 54055 46676 51652
114 113 Saint-Quentin Aisne Hauts-de-France 53856 60644 64196
115 114 Fréjus Var Provence-Alpes-Côte d'Azur 53786 41486 23629
116 115 Saint-Louis La Réunion La Réunion 53589 37420 26663
117 116 Vannes Morbihan Bretagne 53438 45644 36576
118 117 Les Abymes Guadeloupe Guadeloupe 53082 62605 39911
119 118 Clamart Hauts-de-Seine Île-de-France 52926 47227 54906
120 119 Sartrouville Yvelines Île-de-France 52269 50329 40277
121 120 Fontenay-sous-Bois Val-de-Marne Île-de-France 52256 51868 38962
122 121 Cagnes-sur-Mer Alpes-Maritimes Provence-Alpes-Côte d'Azur 51411 40902 22110
123 122 Bayonne Pyrénées-Atlantiques Nouvelle-Aquitaine 51411 40051 42743
124 123 Sevran Seine-Saint-Denis Île-de-France 51225 48478 20253
125 124 Arles Bouches-du-Rhône Provence-Alpes-Côte d'Azur 51031 52058 45774
126 125 Corbeil-Essonnes Essonne Île-de-France 50954 40345 32192
127 126 Vaulx-en-Velin Métropole de Lyon Auvergne-Rhône-Alpes 50823 44174 20726
128 127 Saint-Ouen-sur-Seine Seine-Saint-Denis Île-de-France 50670 42343 48886
129 128 Massy Essonne Île-de-France 50632 38574 37055
130 129 Vincennes Val-de-Marne Île-de-France 49635 42267 49143
131 130 Laval Mayenne Pays de la Loire 49573 50473 45674
132 131 Albi Tarn Occitanie 48993 46579 42930
133 132 Grasse Alpes-Maritimes Provence-Alpes-Côte d'Azur 48865 41388 30907
134 133 Suresnes Hauts-de-Seine Île-de-France 48763 35998 40616
135 134 Montrouge Hauts-de-Seine Île-de-France 48734 38106 44922
136 135 Martigues Bouches-du-Rhône Provence-Alpes-Côte d'Azur 48420 42678 27945
137 136 Bastia Haute-Corse Corse 48044 37845 38746
138 137 Gennevilliers Hauts-de-Seine Île-de-France 47702 44818 46074
139 138 Aubagne Bouches-du-Rhône Provence-Alpes-Côte d'Azur 47208 41100 27938
140 139 Belfort Territoire de Belfort Bourgogne-Franche-Comté 46954 50125 53214
141 140 Évreux Eure Normandie 46707 49103 42550
142 141 Brive-la-Gaillarde Corrèze Nouvelle-Aquitaine 46630 49765 46561
143 142 Carcassonne Aude Occitanie 46513 43470 43616
144 143 Saint-Priest Métropole de Lyon Auvergne-Rhône-Alpes 46510 41876 20419
145 144 Saint-Malo Ille-et-Vilaine Bretagne 46478 48057 42297
146 145 Charleville-Mézières Ardennes Grand Est 46391 57008 55543
147 146 Saint-Herblain Loire-Atlantique Pays de la Loire 46352 42774 18604
148 147 Choisy-le-Roi Val-de-Marne Île-de-France 46154 34068 41440
149 148 Rosny-sous-Bois Seine-Saint-Denis Île-de-France 46043 37489 30705
150 149 Blois Loir-et-Cher Centre-Val de Loire 45871 49318 42264
151 150 Meudon Hauts-de-Seine Île-de-France 45748 45339 50623
152 151 Saint-Laurent-du-Maroni Guyane Guyane 45576 13616 5031
153 152 Salon-de-Provence Bouches-du-Rhône Provence-Alpes-Côte d'Azur 45400 34054 30722
154 153 Livry-Gargan Seine-Saint-Denis Île-de-France 45012 35387 32063
155 154 Puteaux Hauts-de-Seine Île-de-France 44837 42756 37946
156 155 Chalon-sur-Saône Saône-et-Loire Bourgogne-Franche-Comté 44810 54575 50589
157 156 Saint-Germain-en-Laye Yvelines Île-de-France 44750 39926 38308
158 157 Les Sables-d'Olonne Vendée Pays de la Loire 44355 15830 18093
159 158 Alfortville Val-de-Marne Île-de-France 44287 36119 35023
160 159 Châlons-en-Champagne Marne Grand Est 44246 48423 50764
161 160 Mantes-la-Jolie Yvelines Île-de-France 44227 45087 26058
162 161 Noisy-le-Sec Seine-Saint-Denis Île-de-France 44223 36309 34079
163 162 Saint-Brieuc Côtes-d'Armor Bretagne 44170 44752 50281
164 163 La Courneuve Seine-Saint-Denis Île-de-France 43946 34139 43318
165 164 Sète Hérault Occitanie 43686 41510 40476
166 165 Châteauroux Indre Centre-Val de Loire 43442 50969 49138
167 166 Istres Bouches-du-Rhône Provence-Alpes-Côte d'Azur 43411 35163 13404
168 167 Valenciennes Nord Hauts-de-France 43405 38441 46626
169 168 Garges-lès-Gonesse Val-d'Oise Île-de-France 42956 42144 27312
170 169 Caluire-et-Cuire Métropole de Lyon Auvergne-Rhône-Alpes 42847 41311 37603
171 170 Talence Gironde Nouvelle-Aquitaine 42701 34485 29161
172 171 Tarbes Hautes-Pyrénées Occitanie 42426 47566 55375
173 172 Rezé Loire-Atlantique Pays de la Loire 42368 33262 33509
174 173 Bron Métropole de Lyon Auvergne-Rhône-Alpes 42216 39683 41619
175 174 Castres Tarn Occitanie 41795 44812 40457
176 175 Angoulême Charente Nouvelle-Aquitaine 41711 42876 47822
177 176 Arras Pas-de-Calais Hauts-de-France 41555 38983 49144
178 177 Le Cannet Alpes-Maritimes Provence-Alpes-Côte d'Azur 41471 41842 23231
179 178 Bourg-en-Bresse Ain Auvergne-Rhône-Alpes 41248 40972 37887
180 179 Wattrelos Nord Hauts-de-France 40885 43675 43754
181 180 Bagneux Hauts-de-Seine Île-de-France 40812 36364 42006
182 181 Alès Gard Occitanie 40802 41037 42818
183 182 Boulogne-sur-Mer Pas-de-Calais Hauts-de-France 40664 43678 49276
184 183 Le Lamentin Martinique Martinique 40581 30028 18553
185 184 Gap Hautes-Alpes Provence-Alpes-Côte d'Azur 40559 33444 23994
186 185 Compiègne Oise Hauts-de-France 40542 41896 29700
187 186 Thionville Moselle Grand Est 40477 39712 37079
188 187 Melun Seine-et-Marne Île-de-France 39947 35319 34518
189 188 Douai Nord Hauts-de-France 39634 42175 49187
190 189 Gagny Seine-Saint-Denis Île-de-France 39618 36059 35780
191 190 Anglet Pyrénées-Atlantiques Nouvelle-Aquitaine 39604 33041 21190
192 191 Montélimar Drôme Auvergne-Rhône-Alpes 39415 29982 26748
193 192 Draguignan Var Provence-Alpes-Côte d'Azur 39106 30183 18376
194 193 Colomiers Haute-Garonne Occitanie 39097 26979 10584
195 194 Stains Seine-Saint-Denis Île-de-France 38666 34879 32169
196 195 Marcq-en-Barœul Nord Hauts-de-France 38570 36601 35136
197 196 Chartres Eure-et-Loir Centre-Val de Loire 38426 39595 34469
198 197 Saint-Martin-d'Hères Isère Auvergne-Rhône-Alpes 38398 34341 33605
199 198 Poissy Yvelines Île-de-France 38313 36745 33555
200 199 Joué-lès-Tours Indre-et-Loire Centre-Val de Loire 38250 36798 17826
201 200 Pontault-Combault Seine-et-Marne Île-de-France 37867 26804 9282
202 201 Saint-Joseph La Réunion La Réunion 37517 25630 22361
203 202 Villepinte Seine-Saint-Denis Île-de-France 37280 30303 12103
204 203 Saint-Benoît La Réunion La Réunion 37274 26187 19492
205 204 Châtillon Hauts-de-Seine Île-de-France 37010 26411 24640
206 205 Franconville Val-d'Oise Île-de-France 37010 33802 16205
207 206 Échirolles Isère Auvergne-Rhône-Alpes 36961 34435 15429
208 207 Savigny-sur-Orge Essonne Île-de-France 36734 33295 32075
209 208 Villefranche-sur-Saône Rhône Auvergne-Rhône-Alpes 36288 29542 26338
210 209 Annemasse Haute-Savoie Auvergne-Rhône-Alpes 36250 27669 17166
211 210 Tremblay-en-France Seine-Saint-Denis Île-de-France 36230 31385 26846
212 211 Sainte-Geneviève-des-Bois Essonne Île-de-France 36015 31286 23684
213 212 Creil Oise Hauts-de-France 35800 31956 32544
214 213 Neuilly-sur-Marne Seine-Saint-Denis Île-de-France 35680 31461 22543
215 214 Conflans-Sainte-Honorine Yvelines Île-de-France 35656 31467 26304
216 215 Saint-Raphaël Var Provence-Alpes-Côte d'Azur 35633 26616 17844
217 216 Palaiseau Essonne Île-de-France 35590 28395 23343
218 217 Bagnolet Seine-Saint-Denis Île-de-France 35442 32600 34038
219 218 La Ciotat Bouches-du-Rhône Provence-Alpes-Côte d'Azur 35281 30620 23916
220 219 Villenave-d'Ornon Gironde Nouvelle-Aquitaine 35278 25609 21263
221 220 Thonon-les-Bains Haute-Savoie Auvergne-Rhône-Alpes 35241 29677 20700
222 221 Athis-Mons Essonne Île-de-France 35101 29123 27640
223 222 Saint-Chamond Loire Auvergne-Rhône-Alpes 34979 38878 37728
224 223 Montluçon Allier Auvergne-Rhône-Alpes 34938 44248 57871
225 224 Haguenau Bas-Rhin Grand Est 34789 27675 22944
226 225 Auxerre Yonne Bourgogne-Franche-Comté 34764 38819 35784
227 226 Villeneuve-Saint-Georges Val-de-Marne Île-de-France 34607 26952 30488
228 227 Saint-Leu La Réunion La Réunion 34196 20931 16870
229 228 Châtenay-Malabry Hauts-de-Seine Île-de-France 34170 29197 27484
230 229 Meyzieu Métropole de Lyon Auvergne-Rhône-Alpes 34151 28077 10012
231 230 Saint-Martin Saint-Martin est une collectivité d'outre-mer 34065 28518 4992
232 231 Roanne Loire Auvergne-Rhône-Alpes 34004 41756 53373
233 232 Mâcon Saône-et-Loire Bourgogne-Franche-Comté 33810 37275 33445
234 233 Le Perreux-sur-Marne Val-de-Marne Île-de-France 33793 28477 29099
235 234 Six-Fours-les-Plages Var Provence-Alpes-Côte d'Azur 33665 28957 15118
236 235 Le Port La Réunion La Réunion 33531 34692 19768
237 236 Nevers Nièvre Bourgogne-Franche-Comté 33279 41968 42422
238 237 Sainte-Marie La Réunion La Réunion 33234 20158 14367
239 238 Romans-sur-Isère Drôme Auvergne-Rhône-Alpes 33160 32734 31545
240 239 Vitrolles Bouches-du-Rhône Provence-Alpes-Côte d'Azur 33101 35397 5058
241 240 Schiltigheim Bas-Rhin Grand Est 33069 29155 29198
242 241 Agen Lot-et-Garonne Nouvelle-Aquitaine 33012 30553 34949
243 242 Les Mureaux Yvelines Île-de-France 32949 33089 21733
244 243 Matoury Guyane Guyane 32942 10152 567
245 244 Nogent-sur-Marne Val-de-Marne Île-de-France 32922 25248 26238
246 245 Marignane Bouches-du-Rhône Provence-Alpes-Côte d'Azur 32793 32325 20044
247 246 La Possession La Réunion La Réunion 32633 15614 7626
248 247 Montigny-le-Bretonneux Yvelines Île-de-France 32575 31687 768
249 248 Cambrai Nord Hauts-de-France 32501 33092 37532
250 249 Houilles Yvelines Île-de-France 32449 29650 29338
251 250 Épinal Vosges Grand Est 32223 36732 36856
252 251 Trappes Yvelines Île-de-France 32120 30878 16799
253 252 Châtellerault Vienne Nouvelle-Aquitaine 31733 34678 35337
254 253 Lens Pas-de-Calais Hauts-de-France 31606 35017 41874
255 254 Saint-Médard-en-Jalles Gironde Nouvelle-Aquitaine 31536 22064 8955
256 255 Vigneux-sur-Seine Essonne Île-de-France 31463 25203 22577
257 256 Pontoise Val-d'Oise Île-de-France 31422 27150 17509
258 257 L'Haÿ-les-Roses Val-de-Marne Île-de-France 31417 29746 24352
259 258 Le Chesnay-Rocquencourt Yvelines Île-de-France 31306 29542 14184
260 259 Baie-Mahault Guadeloupe Guadeloupe 31193 15036 7398
261 260 Plaisir Yvelines Île-de-France 31013 25877 6871
262 261 Cachan Val-de-Marne Île-de-France 30884 24266 26187
263 262 Pierrefitte-sur-Seine Seine-Saint-Denis Île-de-France 30828 23822 19017
264 263 Malakoff Hauts-de-Seine Île-de-France 30711 30959 36198
265 264 Viry-Châtillon Essonne Île-de-France 30706 30580 27045
266 265 Dreux Eure-et-Loir Centre-Val de Loire 30664 35230 29408
267 266 Goussainville Val-d'Oise Île-de-France 30642 24812 16097
268 267 Bezons Val-d'Oise Île-de-France 30484 25680 24475
269 268 Liévin Pas-de-Calais Hauts-de-France 30423 33623 35853
270 269 Rillieux-la-Pape Métropole de Lyon Auvergne-Rhône-Alpes 30410 30791 9591
271 270 Chatou Yvelines Île-de-France 30330 27977 22619
272 271 Menton Alpes-Maritimes Provence-Alpes-Côte d'Azur 30231 29141 25040
273 272 Herblay-sur-Seine Val-d'Oise Île-de-France 30095 22135 12264
274 273 Périgueux Dordogne Nouvelle-Aquitaine 30060 30280 37450
275 274 Charenton-le-Pont Val-de-Marne Île-de-France 30053 21872 22300
276 275 Saint-Cloud Hauts-de-Seine Île-de-France 30038 28597 28158
277 276 Vandœuvre-lès-Nancy Meurthe-et-Moselle Grand Est 30009 34105 19686
278 277 Villemomble Seine-Saint-Denis Île-de-France 30005 26863 28756

View File

@ -3,133 +3,80 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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="description" content="Présentation de FreeDatas2HTML, module TypeScript permettant de parser, afficher, filtrer... des données, côté client.">
<meta name="robots" content="noindex"> <meta name="robots" content="index, follow">
<link rel="stylesheet" href="CSS/paper.min.css"> <link rel="stylesheet" href="CSS/paper.min.css">
<link rel="stylesheet" href="CSS/fd2html.css"> <link rel="stylesheet" href="CSS/fd2html.css">
<script src="JS/exampleWithHTML.app.js" defer></script> <title>FreeDatas2HTML : parser et afficher des données en TypeScript/JavaScript</title>
<title>freeDatas2HTML : démo d'affichage de données venant du DOM (HTML)</title>
</head> </head>
<body class="paper container">
<h1>freeDatas2HTML</h1>
<p>Autres pages d'exemple avec des données transmises <a href="./withJSON.html">en JSON</a> ou <a href="./withCSV.html">en CSV</a>.</p>
<div class="row"> <body class="paper container">
<div id="filtre1" class="sm-12 md-6 lg-4 col"></div> <h1>FreeDatas2HTML</h1>
<div id="filtre2" class="sm-12 md-6 lg-4 col"></div> <h2>Parser, afficher, paginer, filtrer, classer des données… à laide de TypeScript/JavaScript</h2>
<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"> <article id="datas">
<table> <h3>Parser des données JSON, CSV ou HTML</h3>
<thead>
<tr> <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>
<th>Séquence</th><th>Signification</th><th>Décrit en section</th><th>Défini originellement en CSS niveau</th>
</tr> <p><a href="/userFile.html" title="Page de test" class="paper-btn btn-success">Testez ici avec votre propre fichier CSV.</a></p>
</thead
<tbody> <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 dautres formats de données (XML…).</p>
<tr><td>*</td><td>tout élément</td><td>Sélecteur universel</td><td>2</td></tr>
<tr><td>E</td><td>tout élément de type E</td><td>Sélecteur de type d'élément</td><td>1</td></tr> <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>
<tr><td>E[foo]</td><td>tout élément E portant l'attribut "foo"</td><td>Sélecteurs d'attribut</td><td>2</td></tr>
<tr><td>E[foo="bar"]</td><td>tout élément E portant l'attribut" <h3>Afficher les données dans votre page web</h3>
foo" et dont la valeur de cet attribut est exactement "bar"</td><td>Sélecteurs d'attribut</td><td>2</td></tr>
<tr><td>E[foo~="bar"]</td><td>tout élément E dont l'attribut "foo" <p>FreeDatas2HTML vous permet dafficher les données dans votre page web, par défaut <strong>sous forme de tableau</strong>. Mais il est possible de paramèter dautres formats, par exemple <strong>une liste HTML</strong> ou encore dutiliser son propre moteur de rendu, tout en bénéficiant du reste du code de FreeDatas2HTML.</p>
contient une liste de valeurs séparées par des espaces, l'une
de ces valeurs étant exactement égale à "bar"</td><td>Sélecteurs d'attribut</td><td>2</td></tr> <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 denregistrements</strong> peut être affiché.</p>
<tr><td>E[foo^="bar"]</td><td>tout élément E dont la valeur de l'attribut
"foo" commence exactement par la chaîne "bar"</td><td>Sélecteurs d'attribut</td><td>3</td></tr> <h3>Classer les données</h3>
<tr><td>E[foo$="bar"]</td><td>tout élément E dont la valeur de l'attribut
"foo" finit exactement par la chaîne "bar"</td><td>Sélecteurs d'attribut</td><td>3</td></tr> <p>Certains champs peuvent être proposés pour permettre de classer les données affichées.</p>
<tr><td>E[foo*="bar"]</td><td>tout élément E dont la valeur de l'attribut
"foo" contient la sous-chaîne "bar"</td><td>Sélecteurs d'attribut</td><td>3</td></tr> <p>Par défaut, <strong>le classement se fait de manière alphabétique et «naturelle»</strong>, cest-à-dire quen ordre ascendant «20» sera devant «100», malgré le fait que «1» se trouve devant «2»…</p>
<tr><td>E[lang|="en"]</td><td>tout élément E dont l'attribut 'lang"
est une liste de valeurs séparées par des tirets et commençant <p>Mais il est possible de <strong>fournir des fonctions spécifiques de classement</strong> pour certains champs, pour peu quelles 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>
(à gauche) par "en"</td><td>Sélecteurs d'attribut</td><td>2</td></tr>
<tr><td>E:root</td><td>un élément E, racine du document</td><td>Pseudo-classes structurelles</td><td>3</td></tr> <h3>Filtrer les données</h3>
<tr><td>E:nth-child(n)</td><td>un élément E qui est le n-ième enfant
de son parent</td><td>Pseudo-classes structurelles</td><td>3</td></tr> <p>Il peut être proposé à lutilisateur de filtrer les données, via des listes &lt;SELECT&gt; reprenant les valeurs distinctes dun champ, classées de la même manière que vu précédemment.</p>
<tr><td>E:nth-last-child(n)</td><td>un élément E qui est le n-ième enfant
de son parent en comptant depuis le dernier enfant</td><td>Pseudo-classes structurelles</td><td>3</td></tr> <p>Si plusieurs filtres sont ainsi proposés, leurs actions sadditionnent, cest-à-dire que <strong>seuls les enregistrements validant tous les filtres sélectionnés seront fournis en résultat</strong>.</p>
<tr><td>E:nth-of-type(n)</td><td>un élément E qui est le n-ième enfant
de son parent et de ce type</td><td>Pseudo-classes structurelles</td><td>3</td></tr> <h3>Moteur de recherche</h3>
<tr><td>E:nth-last-of-type(n)</td><td>un élément E qui est le n-ième enfant
de son parent et de ce type en comptant depuis le dernier enfant</td><td>Pseudo-classes structurelles</td><td>3</td></tr> <p>Un moteur de recherche peut aussi être proposé à lutilisateur.<br />
<tr><td>E:first-child</td><td>un élément E, premier enfant de son parent</td><td>Pseudo-classes structurelles</td><td>2</td></tr> Il agit comme les filtres précédents, si ce nest que <strong>la saisie est libre et que la recherche se fait sur plusieurs champs</strong>.</p>
<tr><td>E:last-child</td><td>un élément E, dernier enfant de son parent</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
<tr><td>E:first-of-type</td><td>un élément E, premier enfant de son type</td><td>Pseudo-classes structurelles</td><td>3</td></tr> <p>Il est possible de définir les champs sur lesquels effectuer la recherche ou les garder tous (par défaut).</p>
<tr><td>E:last-of-type</td><td>un élément E, dernier enfant de son type</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
<tr> <p>La recherche <strong>peut être lancée dès la saisie dun certain nombre de caractères</strong>, ou attendre un clic sur le bouton denvoi.</p>
<td height="19">E:only-child</td><td height="19">un élément E, seul enfant de
son parent</td><td height="19">Pseudo-classes <h3>Pagination</h3>
structurelles</td><td height="19">3</td></tr>
<tr><td>E:only-of-type</td><td>un élément E, seul enfant de son type</td><td>Pseudo-classes structurelles</td><td>3</td></tr> <p>Une valeur de pagination peut être définie et/ou plusieurs <strong>options de pagination</strong> proposées aux utilisateurs finaux.</p>
<tr><td>E:empty</td><td>un élément E qui n'a aucun enfant (y compris
noeuds textuels purs)</td><td>Pseudo-classes structurelles</td><td>3</td></tr> <h3>Adaptable à vos besoins</h3>
<tr><td>E:link <br>
E:visited</td><td>un élément E qui est la source d'un hyperlien <p><strong>Toutes les fonctionnalités de FreeDatas2HTML sont proposées en option.</strong></p>
dont la cible n'a pas encore été visitée (:link) ou
a déjà été visitée (:visited)</td><td>Les pseudo-classes de lien</td><td>1</td></tr> <p>Vous pouvez très bien nutiliser FreeDatas2HTML que pour parser les données et en faire ensuite ce que bon vous semble…</p>
<tr><td>E:active <br>
E:hover <br> <p>Vous pouvez écrire vos propres scripts pour <strong>remplacer nimporte quelle classe du projet</strong>, pour peu quil respecte son interface. Cela peut être assez simple, en vous inspirant de lexistant.</p>
E:focus</td><td>un élément E pendant certaines actions de
l'usager</td><td>Les pseudo-classes d'action <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>
Usager </td><td>1 and 2</td></tr>
<tr><td>E:target</td><td>un élément E qui est la cible de l'URL d'origine <p>Nhésitez pas à me contacter pour me signaler un bug ou me demander de laide pour une intégration. Pas forcément gratuitement, dans le deuxième cas :-)</p>
contenant lui-même un fragment identifiant.</td><td>La pseudo-classe :target</td><td>3</td></tr>
<tr><td>E:lang(c)</td><td>un élément E dont le langage (humain) est <h3>Code et dépendances</h3>
c (le langage du document spécifie comment le langage humain est
déterminé)</td><td>La pseudo-classe :lang()&nbsp;</td><td>2</td></tr> <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>
<tr><td>E:enabled<br>
E:disabled&nbsp;</td><td>un élément d'interface utilisateur E qui <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>
est actif ou inactif.</td><td>Les pseudo-classes d'état
d'élément d'interface</td><td>3</td></tr>
<tr><td>E:checked<br>
E:indeterminate&nbsp;</td><td>un élément d'interface utilisateur E qui
est coché ou dont l'état est indéterminé (par
exemple un bouton-radio ou une case à cocher)</td><td>Les pseudo-classes d'état
d'élément d'interface</td><td>3</td></tr>
<tr><td>E:contains("foo")</td><td>un élément E dont le contenu textuel concaténé
contient la sous-chaîne "foo"</td><td>La pseudo-classe de contenu</td><td>3</td></tr>
<tr><td>E::first-line</td><td>la première ligne formatée d'un élément
E</td><td>The :first-line pseudo-element</td><td>1</td></tr>
<tr><td>E::first-letter</td><td>le premier caractère formaté d'un élément
E</td><td>Le pseudo-élément
::first-letter </td><td>1</td></tr>
<tr><td>E::selection</td><td>la partie d'un élément E qui est actuellement
sélectionnée/mise en exergue par l'usager</td><td>Les pseudo-éléments
fragments d'éléments d'interface</td><td>3</td></tr>
<tr><td>E::before</td><td>le contenu généré avant un élément
E</td><td>Le pseudo-élément
::before </td><td>2</td></tr>
<tr><td>E::after</td><td>le contenu généré après un
élément E</td><td>Le pseudo-élément
::after </td><td>2</td></tr>
<tr><td>E.warning</td><td><i>Uniquement en HTML</i>. Identique à E[class~="warning"].</td><td>Sélecteurs de classe</td><td>1</td></tr>
<tr><td>E#myid</td><td>un élément E dont l'ID est égal à
"myid".</td><td>Sélecteurs d'ID</td><td>1</td></tr>
<tr><td>E:not(s)</td><td> un élément E qui n'est pas représenté
par le sélecteur simple s</td><td>La pseudo-classe de négation</td><td>3</td></tr>
<tr><td>E F</td><td>un élément F qui est le descendant d'un
élément E</td><td>Combinateur de descendance
</td><td>1</td></tr>
<tr><td>E &gt; F</td><td>un élément F qui est le fils d'un élément
E</td><td>Combinateur filial</td><td>2</td></tr>
<tr><td>E + F</td><td>un élément F immédiatement précédé
par un élément E</td><td>Combinateur d'adjacence
directe</td><td>2</td></tr>
<tr><td>E ~ F</td><td>un élément F précédé
par un élément E</td><td>Combinateur d'adjacence
indirecte</td><td>3</td></tr>
</tbody>
</table>
</article> </article>
<p id="pages"></p>
<aside><p>Le tableau vient du <a href="https://www.w3.org/Style/css3-selectors-updates/WD-css3-selectors-20010126.fr.html#selectors" targe="_blank">W3C</a> qui pourra vous donner quelques pistes pour créer vos sélecteurs CSS si besoin.</p> <footer><p>Design basé sur <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a></p></footer>
<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>Design basé sur <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a></p></aside>
</body> </body>
</html> </html>

View File

@ -8,29 +8,33 @@
<link rel="stylesheet" href="CSS/paper.min.css"> <link rel="stylesheet" href="CSS/paper.min.css">
<link rel="stylesheet" href="CSS/fd2html.css"> <link rel="stylesheet" href="CSS/fd2html.css">
<script src="JS/exampleWithUserFile.app.js" defer></script> <script src="JS/exampleWithUserFile.app.js" defer></script>
<title>freeDatas2HTML : afficher les données d'un fichier CSV dans une page web</title> <title>Afficher les données d'un fichier CSV dans une page web à l'aide de FreeDatas2HTML</title>
</head> </head>
<body class="paper container"> <body class="paper container">
<h1>freeDatas2HTML</h1> <h1>FreeDatas2HTML</h1>
<h2>Afficher votre fichier CSV dans la page web</h2> <h2>Afficher votre fichier CSV dans la page web</h2>
<p>Sur 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 moins lisible. freeDatas2HTML permet d'afficher les données autrement que sous forme de tableau pour prévoir ce type de situation.</p>
<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> <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"> <form id="userSettings">
<fieldset class="form-group"> <fieldset class="form-group">
<label for="myFile">Sélectionnez votre fichier CSV :</label><input type="file" id="myFile" name="myFile" accept=".csv, .tsv"> <label for="myFile">Sélectionnez votre fichier CSV :</label><input type="file" id="myFile" name="myFile" accept=".csv">
</fieldset> </fieldset>
<div id="displayOptions"> <div id="displayOptions"></div>
</div>
</fieldset>
</form> </form>
<div class="row"> <div class="row">
<div id="paginationOptions" class="col-12 col"></div> <div id="paginationOptions" class="sm-12 md-6 lg-3 col"></div>
<div id="search" class="sm-12 md-6 lg-6 col"></div> <div id="search" class="sm-12 md-6 lg-9 col"></div>
</div> </div>
<article id="datas"></article> <article id="datas"></article>
<p id="pages"></p> <p id="pages"></p>
<aside><p>Design basé sur <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a></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> </body>
</html> </html>

View File

@ -3,17 +3,17 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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="description" content="Exemple d'utilisation de FreeDatas2HTML pour visualiser des informations venant d'un fichier CSV.">
<meta name="robots" content="noindex"> <meta name="robots" content="index, follow">
<link rel="stylesheet" href="CSS/paper.min.css"> <link rel="stylesheet" href="CSS/paper.min.css">
<link rel="stylesheet" href="CSS/fd2html.css"> <link rel="stylesheet" href="CSS/fd2html.css">
<script src="JS/exampleWithCSV.app.js" defer></script> <script src="JS/exampleWithCSV.app.js" defer></script>
<title>freeDatas2HTML : démo d'affichage de données venant d'un fichier CSV</title> <title>Parser et afficher des données CSV via FreeDatas2HTML</title>
</head> </head>
<body class="paper container"> <body class="paper container">
<h1>freeDatas2HTML</h1> <h1>FreeDatas2HTML</h1>
<p><a href="./withJSON.html">Autre page d'exemple avec des données transmises en JSON</a>.</p> <h2>Parser et afficher des données CSV</h2>
<div class="row"> <div class="row">
<div id="filtre1" class="sm-12 md-6 lg-4 col"></div> <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="filtre2" class="sm-12 md-6 lg-4 col"></div>
@ -27,12 +27,16 @@
<p>Si tout se passe bien, ce texte sera remplacé par un tableau de données extraites du fichier csv.</p> <p>Si tout se passe bien, ce texte sera remplacé par un tableau de données extraites du fichier csv.</p>
</article> </article>
<p id="pages"></p> <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>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> <aside>
<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>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>Il est également possible dafficher le nombre total de résultats, avec prise en compte des éventuels filtres.</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>Une autre option permet de <b>paginer les résultats</b>.</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>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> <p>Il est également possible dafficher le nombre total de résultats, avec prise en compte des éventuels filtres.</p>
<p>Design basé sur <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a></p></aside> <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 basé sur <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a></p></footer>
</body> </body>
</html> </html>

137
public/withHTML.html Normal file
View File

@ -0,0 +1,137 @@
<!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 parser et adapter l'affichage d'un tableau HTML.">
<meta name="robots" content="index, follow">
<link rel="stylesheet" href="CSS/paper.min.css">
<link rel="stylesheet" href="CSS/fd2html.css">
<script src="JS/exampleWithHTML.app.js" defer></script>
<title>Parser et afficher un tableau HTML via FreeDatas2HTML</title>
</head>
<body class="paper container">
<h1>FreeDatas2HTML</h1>
<h2>Parser un tableau HTML pour adapter son affichage</h2>
<div class="row">
<div id="filtre1" class="sm-12 md-6 lg-6 col"></div>
<div id="paginationOptions" class="sm-12 md-6 lg-6 col"></div>
</div>
<h3>Nombre total de résultats : <span id="compteur"></span></h3>
<article id="datas">
<table>
<thead>
<tr>
<th>Séquence</th><th>Signification</th><th>Décrit en section</th><th>Version CSS</th>
</tr>
</thead
<tbody>
<tr><td>*</td><td>tout élément</td><td>Sélecteur universel</td><td>2</td></tr>
<tr><td>E</td><td>tout élément de type E</td><td>Sélecteur de type d'élément</td><td>1</td></tr>
<tr><td>E[foo]</td><td>tout élément E portant l'attribut "foo"</td><td>Sélecteurs d'attribut</td><td>2</td></tr>
<tr><td>E[foo="bar"]</td><td>tout élément E portant l'attribut"
foo" et dont la valeur de cet attribut est exactement "bar"</td><td>Sélecteurs d'attribut</td><td>2</td></tr>
<tr><td>E[foo~="bar"]</td><td>tout élément E dont l'attribut "foo"
contient une liste de valeurs séparées par des espaces, l'une
de ces valeurs étant exactement égale à "bar"</td><td>Sélecteurs d'attribut</td><td>2</td></tr>
<tr><td>E[foo^="bar"]</td><td>tout élément E dont la valeur de l'attribut
"foo" commence exactement par la chaîne "bar"</td><td>Sélecteurs d'attribut</td><td>3</td></tr>
<tr><td>E[foo$="bar"]</td><td>tout élément E dont la valeur de l'attribut
"foo" finit exactement par la chaîne "bar"</td><td>Sélecteurs d'attribut</td><td>3</td></tr>
<tr><td>E[foo*="bar"]</td><td>tout élément E dont la valeur de l'attribut
"foo" contient la sous-chaîne "bar"</td><td>Sélecteurs d'attribut</td><td>3</td></tr>
<tr><td>E[lang|="en"]</td><td>tout élément E dont l'attribut 'lang"
est une liste de valeurs séparées par des tirets et commençant
(à gauche) par "en"</td><td>Sélecteurs d'attribut</td><td>2</td></tr>
<tr><td>E:root</td><td>un élément E, racine du document</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
<tr><td>E:nth-child(n)</td><td>un élément E qui est le n-ième enfant
de son parent</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
<tr><td>E:nth-last-child(n)</td><td>un élément E qui est le n-ième enfant
de son parent en comptant depuis le dernier enfant</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
<tr><td>E:nth-of-type(n)</td><td>un élément E qui est le n-ième enfant
de son parent et de ce type</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
<tr><td>E:nth-last-of-type(n)</td><td>un élément E qui est le n-ième enfant
de son parent et de ce type en comptant depuis le dernier enfant</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
<tr><td>E:first-child</td><td>un élément E, premier enfant de son parent</td><td>Pseudo-classes structurelles</td><td>2</td></tr>
<tr><td>E:last-child</td><td>un élément E, dernier enfant de son parent</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
<tr><td>E:first-of-type</td><td>un élément E, premier enfant de son type</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
<tr><td>E:last-of-type</td><td>un élément E, dernier enfant de son type</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
<tr>
<td height="19">E:only-child</td><td height="19">un élément E, seul enfant de
son parent</td><td height="19">Pseudo-classes
structurelles</td><td height="19">3</td></tr>
<tr><td>E:only-of-type</td><td>un élément E, seul enfant de son type</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
<tr><td>E:empty</td><td>un élément E qui n'a aucun enfant (y compris
noeuds textuels purs)</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
<tr><td>E:link <br>
E:visited</td><td>un élément E qui est la source d'un hyperlien
dont la cible n'a pas encore été visitée (:link) ou
a déjà été visitée (:visited)</td><td>Les pseudo-classes de lien</td><td>1</td></tr>
<tr><td>E:active <br>
E:hover <br>
E:focus</td><td>un élément E pendant certaines actions de
l'usager</td><td>Les pseudo-classes d'action
Usager </td><td>1 and 2</td></tr>
<tr><td>E:target</td><td>un élément E qui est la cible de l'URL d'origine
contenant lui-même un fragment identifiant.</td><td>La pseudo-classe :target</td><td>3</td></tr>
<tr><td>E:lang(c)</td><td>un élément E dont le langage (humain) est
c (le langage du document spécifie comment le langage humain est
déterminé)</td><td>La pseudo-classe :lang()&nbsp;</td><td>2</td></tr>
<tr><td>E:enabled<br>
E:disabled&nbsp;</td><td>un élément d'interface utilisateur E qui
est actif ou inactif.</td><td>Les pseudo-classes d'état
d'élément d'interface</td><td>3</td></tr>
<tr><td>E:checked<br>
E:indeterminate&nbsp;</td><td>un élément d'interface utilisateur E qui
est coché ou dont l'état est indéterminé (par
exemple un bouton-radio ou une case à cocher)</td><td>Les pseudo-classes d'état
d'élément d'interface</td><td>3</td></tr>
<tr><td>E:contains("foo")</td><td>un élément E dont le contenu textuel concaténé
contient la sous-chaîne "foo"</td><td>La pseudo-classe de contenu</td><td>3</td></tr>
<tr><td>E::first-line</td><td>la première ligne formatée d'un élément
E</td><td>The :first-line pseudo-element</td><td>1</td></tr>
<tr><td>E::first-letter</td><td>le premier caractère formaté d'un élément
E</td><td>Le pseudo-élément
::first-letter </td><td>1</td></tr>
<tr><td>E::selection</td><td>la partie d'un élément E qui est actuellement
sélectionnée/mise en exergue par l'usager</td><td>Les pseudo-éléments
fragments d'éléments d'interface</td><td>3</td></tr>
<tr><td>E::before</td><td>le contenu généré avant un élément
E</td><td>Le pseudo-élément
::before </td><td>2</td></tr>
<tr><td>E::after</td><td>le contenu généré après un
élément E</td><td>Le pseudo-élément
::after </td><td>2</td></tr>
<tr><td>E.warning</td><td><i>Uniquement en HTML</i>. Identique à E[class~="warning"].</td><td>Sélecteurs de classe</td><td>1</td></tr>
<tr><td>E#myid</td><td>un élément E dont l'ID est égal à
"myid".</td><td>Sélecteurs d'ID</td><td>1</td></tr>
<tr><td>E:not(s)</td><td> un élément E qui n'est pas représenté
par le sélecteur simple s</td><td>La pseudo-classe de négation</td><td>3</td></tr>
<tr><td>E F</td><td>un élément F qui est le descendant d'un
élément E</td><td>Combinateur de descendance
</td><td>1</td></tr>
<tr><td>E &gt; F</td><td>un élément F qui est le fils d'un élément
E</td><td>Combinateur filial</td><td>2</td></tr>
<tr><td>E + F</td><td>un élément F immédiatement précédé
par un élément E</td><td>Combinateur d'adjacence
directe</td><td>2</td></tr>
<tr><td>E ~ F</td><td>un élément F précédé
par un élément E</td><td>Combinateur d'adjacence
indirecte</td><td>3</td></tr>
</tbody>
</table>
</article>
<p id="pages"></p>
<aside>
<p>Dans cette page, avant l'action de FreeDatas2HTML, toutes les données sont affichées, sans proposer de pagination ni de filtre.</p>
<p>C'est un cas d'usage possible de FreeDatas2HTML : vous avez listé des données dans une page via votre code backend (PHP, Python, node.js...). Vous souhaitez proposer à vos utilisateurs de passer de pages en pages, d'effectuer des recherches... tout cela sans avoir à appeler de nouveau votre backend. Le résultat est plus fluide et cela économise les ressources de votre serveur, tout se faisant dans le navigateur de l'utilisateur.</p>
<p>Il est tout à fait possible de lister vos données autrement que dans un tableau, du moment qu'il reste possible de cibler séparément le nom des champs et la liste des enregistrements via des sélecteurs CSS. D'où le tableau ci-dessous, venant du <a href="https://www.w3.org/Style/css3-selectors-updates/WD-css3-selectors-20010126.fr.html#selectors" target="_blank" rel="noopener">W3C</a> et dont le contenu pourra donc vous être utile :-)</p>
</aside>
<footer><p>Design basé sur <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a></p></footer>
</body>
</html>

View File

@ -1,32 +1,34 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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="description" content="Exemple d'utilisation de FreeDatas2HTML pour parser et adapter l'affichage de données JSON.">
<meta name="robots" content="noindex"> <meta name="robots" content="index, follow">
<link rel="stylesheet" href="CSS/paper.min.css"> <link rel="stylesheet" href="CSS/paper.min.css">
<link rel="stylesheet" href="CSS/fd2html.css"> <link rel="stylesheet" href="CSS/fd2html.css">
<script src="JS/exampleWithJSON.app.js" defer></script> <script src="JS/exampleWithJSON.app.js" defer></script>
<title>freeDatas2HTML : démo d'affichage de données transmises en JSON.</title> <title>Parser et afficher des données JSON via FreeDatas2HTML</title>
</head> </head>
<body class="paper container"> <body class="paper container">
<h1>freeDatas2HTML</h1> <h1>FreeDatas2HTML</h1>
<p><a href="./">Autre page d'exemple avec des données transmises en CSV.</a>.</p> <h2>Parser et afficher des données JSON</h2>
<div class="row"> <div class="row">
<div id="filtre1" class="sm-12 md-6 lg-4 col"></div> <div id="filtre1" class="sm-12 md-6 lg-6 col"></div>
<div id="filtre2" class="sm-12 md-6 lg-4 col"></div> <div id="paginationOptions" class="sm-12 md-6 lg-6 col"></div>
<div id="filtre3" class="sm-12 md-6 lg-4 col"></div> </div>
<div id="paginationOptions" class="col-12 col"></div>
</div> <h3>Nombre total de résultats : <span id="compteur"></span></h3>
<article id="datas">
<h3>Nombre total de résultats : <span id="compteur"></span></h3> <p>Si tout se passe bien, ce texte sera remplacé par un tableau de données extraites du fichier JSON.</p>
<article id="datas"> </article>
<p>Si tout se passe bien, ce texte sera remplacé par un tableau de données extraites du fichier csv.</p> <p id="pages"></p>
</article> <aside>
<p id="pages"></p> <p>Le format JSON est sans doute le plus utilisé de nos jours, surtout si vous cherchez à <strong>afficher les données provenant d'une API</strong>, ce que permet FreeDatas2HTML en passant par exemple un token en entête de votre requête.</p>
<aside><p>Le fonctionnement est similaire qu'avec du CSV. Les données JSON ont été recopiées de l'<a href="https://jsonplaceholder.typicode.com/" target="_blank">API de test {JSON} Placeholder</a>.</p> <p>Pour le reste, le fonctionnement est similaire qu'<a href="./withCSV.html">avec du CSV</a>.<br>Les données JSON ont été recopiées de l'<a href="https://jsonplaceholder.typicode.com/" target="_blank"rel="noopener">API de test {JSON} Placeholder</a>.</p>
<p>Design basé sur <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a></p></aside> </aside>
</body>
<footer><p>Design basé sur <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a></p></footer>
</body>
</html> </html>

View File

@ -1,103 +0,0 @@
import { FreeDatas2HTML, Pagination, Render, SearchEngine, Selector, SortingField } from "./FreeDatas2HTML";
const initialise = async () =>
{
try
{
// Fonction spécifique de classement utile pour les données du 4ième champs
const mySort = (a: any, b: any, order: "asc"|"desc" = "asc") =>
{
const values = [ "> 100000", "> 1 et < 100 000", "≤ 1", "Traces", "Inexistant"];
if(order === "desc")
values.reverse();
if(values.indexOf(a) > values.indexOf(b))
return -1;
else if(values.indexOf(a) < values.indexOf(b))
return 1;
else
return 0;
};
// Création d'un convertisseur parsant les données d'un fichier CSV "distant"
let converter=new FreeDatas2HTML("CSV");
converter.parser.setRemoteSource({ url:"http://localhost:8080/datas/elements-chimiques.csv" });
converter.datasViewElt={ id:"datas" };
await converter.run();
// Adaptation du rendu suivant la taille de l'écran
const myRender=new Render();
if(window.innerWidth < 800)
{
myRender.settings=
{
allBegining:"<h4>Affichage petits écrans !</h4>",
allEnding:"",
linesBegining:"<ul>",
linesEnding:"</ul>",
lineBegining:"<li><ul>",
lineEnding:"</ul></li>",
dataDisplaying:"<li><b>#FIELDNAME :</b> #VALUE</li>",
};
converter.datasRender=myRender;
}
else
{
myRender.settings.allBegining="<table class='table-hover'>";
converter.datasRender=myRender;
}
// Ajout d'une fonction de classement spécifique
converter.datasSortingFunctions=[{ datasFieldNb:4, sort:mySort }];
// Configuration de la pagination
const pagination=new Pagination(converter, { id:"pages" }, "Page à afficher :");
pagination.options={ displayElement: { id:"paginationOptions" }, values: [10,20,50,500] , name: "Choix de pagination :" };
pagination.selectedValue=10;
converter.pagination=pagination;
pagination.options2HTML();
// Affichage initial
converter.datasCounterElt={ id:"compteur" };
await converter.run();
// Création d'outils permettant de filtrer les données des champs de données
let filtre1=new Selector(converter, 3, { id:"filtre1"} );
filtre1.filter2HTML();
let filtre2=new Selector(converter, 4, { id:"filtre2"} );
filtre2.filter2HTML();
let filtre3=new Selector(converter, 5, { id:"filtre3"}, ",");
filtre3.filter2HTML();
// + un moteur de recherche
const mySearch=new SearchEngine(converter, { id:"search" }, [1,3,5]);
mySearch.label="Qui cherche trouve ?";
mySearch.btnTxt="Va chercher !";
mySearch.automaticSearch=true;
mySearch.nbCharsForSearch=2;
mySearch.placeholder="Tapes en NB, chef !";
mySearch.filter2HTML();
// + Injection des filtres dans le convertisseur
converter.datasFilters=[filtre1,filtre2,filtre3, mySearch];
// Ajout de champs permettant de classer les données
// Uniquement avec un rendu tableau (grand écran), car entêtes de colonne nécessaires
if(window.innerWidth >= 800)
{
let sortingField1=new SortingField(converter, 0);
sortingField1.field2HTML();
let sortingField2=new SortingField(converter, 1);
sortingField2.field2HTML();
let sortingField3=new SortingField(converter, 2);
sortingField3.field2HTML();
let sortingField4=new SortingField(converter, 4);
sortingField4.field2HTML();
converter.datasSortingFields=[sortingField1,sortingField2,sortingField3,sortingField4];
}
}
catch(e)
{
console.error(e);
if(document.getElementById("datas")!==null)
document.getElementById("datas")!.innerHTML="<strong>Désolé, mais un problème technique empêche l'affichage des données.</strong>";
}
}
initialise();

View File

@ -1,67 +0,0 @@
import { FreeDatas2HTML, Pagination, Render, Selector, SortingField } from "./FreeDatas2HTML";
const initialise = async () =>
{
try
{
// Création d'un convertisseur parsant des données transmises en HTML
let converter=new FreeDatas2HTML("HTML");
converter.datasViewElt={ id:"datas" };
await converter.run();
// Adaptation du rendu suivant la taille de l'écran
const myRender=new Render();
if(window.innerWidth < 800)
{
myRender.settings=
{
allBegining:"<h4>Affichage petits écrans !</h4>",
allEnding:"",
linesBegining:"<ul>",
linesEnding:"</ul>",
lineBegining:"<li><ul>",
lineEnding:"</ul></li>",
dataDisplaying:"<li><b>#FIELDNAME :</b> #VALUE</li>",
};
converter.datasRender=myRender;
}
else
{
myRender.settings.allBegining="<table class='table-hover'>";
converter.datasRender=myRender;
}
// Configuration de la pagination
const pagination=new Pagination(converter, { id:"pages" }, "Page à afficher :");
pagination.options={ displayElement: { id:"paginationOptions" }, values: [15,30,50] , name: "Nombre de lignes par page :" };
pagination.selectedValue=30;
converter.pagination=pagination;
pagination.options2HTML();
// Affichage initial
converter.datasCounterElt={ id:"compteur" };
await converter.run();
// Création d'un filtre par auteur :
let filtre1=new Selector(converter, 3, { id:"filtre1"} );
filtre1.filter2HTML();
converter.datasFilters=[filtre1];
// Ajout de champs permettant de classer les données
// Uniquement avec un rendu tableau (grand écran), car entêtes de colonne nécessaires
if(window.innerWidth >= 800)
{
let sortingField1=new SortingField(converter, 2);
sortingField1.field2HTML();
let sortingField2=new SortingField(converter, 3);
sortingField2.field2HTML();
converter.datasSortingFields=[sortingField1,sortingField2];
}
}
catch(e)
{
console.error(e);
if(document.getElementById("datas")!==null)
document.getElementById("datas")!.innerHTML="<strong>Désolé, mais un problème technique empêche l'affichage des données.</strong>";
}
}
initialise();

View File

@ -1,70 +0,0 @@
import { FreeDatas2HTML, Pagination, Render, Selector, SortingField } from "./FreeDatas2HTML";
const initialise = async () =>
{
try
{
// Création d'un convertisseur parsant des données transmises en JSON
let converter=new FreeDatas2HTML("JSON");
converter.parser.setRemoteSource({ url: "http://localhost:8080/datas/posts.json", withCredentials:true, headers: [{ key:"Authorization", value:"Token YWxhZGRpbjpvcGVuc2VzYW1l" }] });
converter.datasViewElt={ id:"datas" };
await converter.run();
// Adaptation du rendu suivant la taille de l'écran
const myRender=new Render();
if(window.innerWidth < 800)
{
myRender.settings=
{
allBegining:"<h4>Affichage petits écrans !</h4>",
allEnding:"",
linesBegining:"<ul>",
linesEnding:"</ul>",
lineBegining:"<li><ul>",
lineEnding:"</ul></li>",
dataDisplaying:"<li><b>#FIELDNAME :</b> #VALUE</li>",
};
converter.datasRender=myRender;
}
else
{
myRender.settings.allBegining="<table class='table-hover'>";
converter.datasRender=myRender;
}
// Configuration de la pagination
const pagination=new Pagination(converter, { id:"pages" }, "Page à afficher :");
pagination.options={ displayElement: { id:"paginationOptions" }, values: [15,30,50,100] , name: "Nombre de lignes par page :" };
pagination.selectedValue=15;
converter.pagination=pagination;
pagination.options2HTML();
// Affichage initial
converter.datasCounterElt={ id:"compteur" };
await converter.run();
// Création d'un filtre par auteur :
let filtre1=new Selector(converter, 0, { id:"filtre1"} );
filtre1.filter2HTML();
converter.datasFilters=[filtre1];
// Ajout de champs permettant de classer les données
// Uniquement avec un rendu tableau (grand écran), car entêtes de colonne nécessaires
if(window.innerWidth >= 800)
{
let sortingField1=new SortingField(converter, 0);
sortingField1.field2HTML();
let sortingField2=new SortingField(converter, 1);
sortingField2.field2HTML();
let sortingField3=new SortingField(converter, 2);
sortingField3.field2HTML();
converter.datasSortingFields=[sortingField1,sortingField2,sortingField3];
}
}
catch(e)
{
console.error(e);
if(document.getElementById("datas")!==null)
document.getElementById("datas")!.innerHTML="<strong>Désolé, mais un problème technique empêche l'affichage des données.</strong>";
}
}
initialise();

View File

@ -1,112 +0,0 @@
import { FreeDatas2HTML, Pagination, Render, SearchEngine, Selector, SortingField } from "./FreeDatas2HTML";
const initialise = async () =>
{
try
{
const myForm=document.getElementById("userSettings") as HTMLElement;
const myFile=document.getElementById("myFile") as HTMLInputElement;
const dataDisplayElt=document.getElementById("datas");
const dataDisplayOptionsElt=document.getElementById("displayOptions");
if(myFile === null || myForm === null || dataDisplayOptionsElt === null || dataDisplayElt === null)
throw new Error("Certains éléments nécessaires au fonctionnement n'ont pas été trouvés dans le DOM;");
const converter=new FreeDatas2HTML("CSV");
const myRender=new Render();
myRender.settings.allBegining="<table class='table-hover'><caption>Nombre de résultats : <span id='counter'></span></caption>";
converter.datasRender=myRender;
myFile.addEventListener("change", function(e)
{
dataDisplayElt.innerHTML="";
dataDisplayOptionsElt.innerHTML="";
const selectedFiles=myFile.files;
if(selectedFiles !== null && selectedFiles.length === 1)
{
if(selectedFiles[0].type !== "text/csv" && selectedFiles[0].type !== "text/tsv")
dataDisplayOptionsElt.innerHTML=`<p class='text-danger'>Le document que vous avez sélectionné ne semble pas être un fichier CSV valide.</p>`;
else
{
const reader=new FileReader();
reader.onload=async function(e)
{
converter.parser.datas2Parse=reader.result as string;
await converter.run();
let fieldsSelectorHTML=`<fieldset class="form-group"><legend>Quels champs souhaitez-vous afficher ?</legend>`;
for(let i=0; i < converter.fields.length; i++)
fieldsSelectorHTML+=`<label for="selectedField_${i}" class="paper-check"> <input type="checkbox" class="selectedFields" id="selectedField_${i}" name="selectedField_${i}" value=${i} checked> <span>${converter.fields[i]}</span></label>`;
fieldsSelectorHTML+=`</fieldset>`;
dataDisplayOptionsElt.innerHTML=fieldsSelectorHTML+`<button type="submit" class="btn-success">Valider</button>`;
};
reader.readAsText(selectedFiles[0]);
}
}
});
myForm.addEventListener("submit", function(e)
{
e.preventDefault();
dataDisplayElt.innerHTML="";
const fields2Rend: number[]=[];
let checkBox: HTMLInputElement, nbSelector=0;
for(let i=0; i < converter.fields.length; i++)
{
checkBox=document.getElementById("selectedField_"+i) as HTMLInputElement;
if(checkBox !== null)
{
if(checkBox.checked)
fields2Rend.push(i);
}
}
if( fields2Rend.length === 0)
dataDisplayElt.innerHTML=`<p class='text-danger'>Vous n'avez sélectionné aucun champ à afficher !</p>`;
else
{
converter.fields2Rend=fields2Rend;
converter.datasViewElt={ id:"datas" };
// + Un moteur de recherche :
const mySearch=new SearchEngine(converter, { id:"search" });
mySearch.label="Qui cherche trouve ?";
mySearch.btnTxt="Va chercher !";
mySearch.automaticSearch=true;
mySearch.nbCharsForSearch=2;
mySearch.placeholder="Saisir un moins 2 caractères";
mySearch.filter2HTML();
converter.datasFilters=[mySearch];
// + Pagination :
const pagination=new Pagination(converter, { id:"pages" }, "Page à afficher :");
pagination.options={ displayElement: { id:"paginationOptions" }, values: [10,20,50,500] , name: "Choix de pagination :" };
pagination.selectedValue=10;
converter.pagination=pagination;
pagination.options2HTML();
// Actualisation de l'affichage
converter.refreshView();
// + Compteur :
converter.datasCounterElt={ id:"counter" };
converter.datasCounter2HTML();
// +Toutes les colonnes classables :
let sortingField: SortingField;
for(let i=0; i < converter.fields2Rend.length; i++)
{
sortingField=new SortingField(converter, i);
sortingField.field2HTML();
converter.datasSortingFields.push(sortingField);
}
}
});
}
catch(e)
{
console.error(e);
if(document.getElementById("datas")!==null)
document.getElementById("datas")!.innerHTML=`<strong>Désolé, mais un problème imprévu empêche l'affichage des données.</strong>`;
}
}
initialise();