
Cette action fait partie du groupe d'actions gérant l'affichage de données JSON, XML ou CSV issues d'un fichier sur le serveur ou récupérées avec l'API d'un site web. Un mécanisme de cache permet de limiter les interrogations du serveur distant. Très pratique pour les sites avec une formule gratuite limitée en nombre d'appels.
- data2list : sous forme d'une liste arborescente
- data2table : dans un tableau HTML
- data-info : selon votre modèle de mise en page
Ces actions utilisent les mêmes principes et options que vous pouvez décoouvrir à l'aide des boutons bleus ci-dessous.
{up data2table=data_source}
emplacement et type des données
- data2table: URL vers data ou fichier
- datatype: pour forcer la détection du type de données (json, xml)
- encoding: codage des caractères de la source : ISO-8859-1
uniquement pour les données CSV ou XML
- csv-header = 1: 0 ou 1 pour indiquer que la première ligne contient les titres de colonnes
- csv-header-title: liste des titres de colonnes séparés par csv-separator
- csv-separator = ;: caractère séparateur pour les colonnes
- xml-attributes: les champs dans la balise ouvrante sont dans un sous-tableau @attributes, Non par défaut: 0 /* [st-sel-lign] sélection des lignes *
sélection racine données et lignes
- lign-root: chemin de la clé racine. Exemple: trk/trkseg
- lign-select: indice du groupe de données ou champ:valeur pour recherche contenu
- lign-filter: filtrage après lign-select sous la forme champ[=>,<=,==,<>]valeur OU field>
- lign-sort: tri des données sous la forme champ1:asc|desc, champ2:asc|desc, ...
- lign-max: nombre de lignes retournées
sélection des colonnes/champs
- col-include: liste des champs (séparateur virgule) retournés
- col-exclude: liste des champs (séparateur virgule) non retournés
Mise en forme des colonnes
- col-list:
- col-class: classes pour les champs (champ1:class1 class2,champ2:class)
- col-label: correspondance entre nom du champ et titre colonne (champ1:col1,champ2:col2, ...)
type des contenus
- col-type: date, url, image, boolean, compact ou format pour fonction php: sprintf
- date-format = %e %B %Y: format pour les dates
- boolean-in = 1,0: valeurs dans fichier pour true,false,null
- boolean-out = lang[fr=oui,non,-;en=yes,no,n.a.]: texte en sortie pour les valeurs true,false,null
- url-target = _blank: Cible pour ouverture URL
- image-path: chemin vers une image dans les données
- image-max-size: coté du carré dans lequel elle sera inscrite. Exemple: 100px
si un champ est vide
- col-empty: contenu d'un champ si vide ou égal à zéro. ex: colname:none, ...
habillage du bloc retourné
- model: nom de la classe modèle dans le fichier data2table.css : noborder, line, blue, green
- id:
- class: classe(s) pour bloc
- style: style inline pour bloc
- css-head (base-css): style ajouté dans le HEAD de la page
internal action cache
- cache-delay = 30: durée du cache en minutes. 0 pas de cache
- Version 3.1
- Ajout option col-list qui permet de définir l'ordre des colonnes principales (niveau 1)
- Version 5.1
- lign-select retourne toutes les lignes dont la valeur correspond
- nouvelles options : lign-filter, lign-sort et lign-max


Un exemple simple
Je vais reprendre l'exemple utilisé pour l'action data2list.
Nous voulons afficher les données des villes partageant le même code postal en utilisant les données fournies par le site geo.api.gouv.fr
Le contenu du fichier distant
Le shortcode
{up data2table=https://geo.api.gouv.fr/communes?codePostal=13600}
L'option principale du shortcode est l'url vers les données.
Vous pouvez les voir dans leur forme brute ci-contre ou directement avec cette url https://geo.api.gouv.fr/communes?codePostal=13600.
L'action peut traiter des données au format JSON, XML ou CSV. Si elle ne peut pas reconnaitre le format, il est possible de le forcer avec l'option datatype
Le résultat
nom | code | codeDepartement | siren | codeEpci | codeRegion | codesPostaux | population |
---|---|---|---|---|---|---|---|
0 | |||||||
Ceyreste | 13023 | 13 | 211300231 | 200054807 | 93 | 13600 | 4729 |
La Ciotat | 13028 | 13 | 211300280 | 200054807 | 93 | 13600 | 35993 |
C'est un bon début, mais deux ou trois choses me gêne.
- le label des colonnes est le nom du champ dans le fichier. Remédions à cela avec l'option col-label qui reçoit la liste des champs avec leur traduction.
Exemple:fields-label=nomChamp:label, nomChamp:label, ...
- pour gagner de la place, la colonne codeDepartement est redondante avec le code postal. Nous allons la supprimer avec l'option col-exclude.
- le style de base de l'action est très neutre. Avec model, nous lui affectons une des classes du fichier data2table.scss.
L'option class centre le contenu de toutes les cellules du tableau.
Pour avoir la première colonne 'nom' en gras et justifiée à gauche, nous utilisons l'option col-class avec les classes à affecter au champ. - l'affichage des valeurs des colonnes siren et population pourrait être enrichie en ajoutant l'unité et des espaces pour faciliter la lecture avec l'option col-type.
{up data2table=https://geo.api.gouv.fr/communes?codePostal=13600
| col-exclude=codeDepartement
| col-label=code:Code INSEE, codeRegion:Région, codesPostaux:CP, codeEpci:EPCI
| col-type=population:##num## hab., siren:MASK ### ### ###
| model=blue | class=tc | col-class=nom:b tl }
nom | Code INSEE | siren | EPCI | Région | CP | population |
---|---|---|---|---|---|---|
0 | ||||||
Ceyreste | 13023 | 211 300 231 | 200054807 | 93 | 13600 | 4 729 hab. |
La Ciotat | 13028 | 211 300 280 | 200054807 | 93 | 13600 | 35 993 hab. |
Plus d'informations sur les options communes aux 3 actions data
Sélection des lignes
Option lign-root
L'option lign-root permet de sélectionner une partie de l'arborescence du fichier qui deviendra la racine des données affichées
Le fichier des communes ne convenant pas pour cette démo, je vais utiliser un fichier GPX, au format XML, créé avec https://graphhopper.com/maps/
{up data2table=images/actions-demo/data/GraphHopper-exemple.gpx
| lign-root=trk/trkseg/trkpt
| xml-attributes}
L'argument de root est le chemin comme vous pouvez le voir sur le fichier original
Note: le titre "@attributes" est attribué (par PHP) pour les éléments internes à une balise.
Il peut être renommé avec l'option col-label ou ignoré avec xml-attributes=0
@attributes | ele | |
---|---|---|
lat | lon | |
48.404950 | 2.720740 | 78.1 |
48.404960 | 2.720870 | 78.3 |
48.404920 | 2.720940 | 78.5 |
48.405060 | 2.721440 | 78.1 |
48.405120 | 2.721520 | 77.8 |
L'option lign-select
L'option lign-select propose 2 méthodes pour sélectionner une ou plusieurs lignes.
id | prenom | nom |
---|---|---|
1 | Alain | TERRIEUR |
2 | Alex | TERRIEUR |
3 | Alain | PROVISTE |
4 | Anne | ANAS |
5 | Kelly | DIOTE |
❶ Afficher les lignes contenant la valeur recherchée pour un ou plusieurs champs.
L'argument de select est une liste de clé:valeur séparée par des virgules. select=key:value, ... ,keyN:valueN
La ligne doit répondre à tous les critères (opérateur AND).
La recherche n'est pas sensible aux minuscules/majuscules pour la valeur.
Pour le premier exemple, je veux les fiches des prénommés Alain ou Alex
{up data2table=images/actions-demo/data/select.json
| lign-select=prenom:Alain;alex}
id | prenom | nom |
---|---|---|
1 | Alain | TERRIEUR |
2 | Alex | TERRIEUR |
3 | Alain | PROVISTE |
Pour sélectionner uniquement Alain TERRIEUR
{up data2table=images/actions-demo/data/select.json
| lign-select=prenom:Alain;Alex, nom:terrieur}
id | prenom | nom |
---|---|---|
1 | Alain | TERRIEUR |
2 | Alex | TERRIEUR |
❷ Afficher des lignes selon leur indice.
Il est possible d'indiquer la position de la ligne dans le fichier. La première ligne est 1
.
Pour avoir les dernières lignes, il suffit d'indiquer la position en valeur négative. La dernière ligne est -1
Ce shortcode affiche la première et dernière ligne de notre fichier.
{up data2table=images/actions-demo/data/select.json
| lign-select=1,-1}
id | prenom | nom |
---|---|---|
1 | Alain | TERRIEUR |
5 | Kelly | DIOTE |
L'option lign-filter
L'option lign-filter réalisée après une éventuelle sélection par lign-select, permet une sélection plus souple.
La valeur de cette option se compose du nom de la colonne, d'un opérateur de comparaison et de la valeur recherchée.
Les opérateurs de comparaison proposés sont :
- <= : inférieur ou égal
- >= : supérieur ou égal
- == : égal
- <> : différent
- >< : compris entre 2 valeurs séparées par un tiret (-)
Pour la démonstration, nous utiliserons la même table avec des colonnes date et numérique :
id | prenom | nom | score | date |
---|---|---|---|---|
1 | Alain | TERRIEUR | 10 | 20240101 |
2 | Alex | TERRIEUR | 50 | 20231001 |
3 | Alain | PROVISTE | 20 | 20240915 |
4 | Anne | ANAS | 20 | 20240101 |
5 | Kelly | DIOTE | 101 | 20220701 |
{up data2table=images/actions-demo/data/select-2.json
| col-type=date:date | date-format=%d/%m/%Y
| lign-filter=prenom<=B, date><20230101-20240701}
Nous recherchons toutes les personnes dont le prénom commence par un a et dont la date est entre le 01/01/2023 et le 01/07/2024.
id | prenom | nom | score | date |
---|---|---|---|---|
1 | Alain | TERRIEUR | 10 | 01/01/2024 |
2 | Alex | TERRIEUR | 50 | 01/10/2023 |
4 | Anne | ANAS | 20 | 01/01/2024 |
Notez que le filtrage n'est pas sensible aux minuscules/majuscules et que le type de contenu est identifié automatiquement comme étant une chaine ou un nombre. Ici, la date est filtrée sur sa valeur numérique avant conversion vers un format plus lisible.
L'option lign-sort
Cette option permet de trier le résultat selon la valeur d'une ou plusieurs colonnes.
Le tri est réalisé sur la valeur de la cellule avant l'application de la mise en forme. Cela est particulièrement utile pour les dates.
L'exemple ci-dessous trie la table dans l'ordre croissant des dates, puis décroissant pour les scores
{up data2table=images/actions-demo/data/select-2.json
| col-type=date:date | date-format=%d/%m/%Y
| lign-sort=date:asc, score:desc}
id | prenom | nom | score | date |
---|---|---|---|---|
5 | Kelly | DIOTE | 101 | 01/07/2022 |
2 | Alex | TERRIEUR | 50 | 01/10/2023 |
4 | Anne | ANAS | 20 | 01/01/2024 |
1 | Alain | TERRIEUR | 10 | 01/01/2024 |
3 | Alain | PROVISTE | 20 | 15/09/2024 |
L'option lign-max
Cette option retourne uniquement le nombre de lignes demandées après un séléction par lign-select et lign-filter puis le tri par lign-sort
Ce shortcode affiche les 3 premières lignes après tri sur score et nom
{up data2table=images/actions-demo/data/select-2.json
| col-type=date:date | date-format=%d/%m/%Y
| lign-sort=score:asc, nom:desc
| lign-max=3}
id | prenom | nom | score | date |
---|---|---|---|---|
1 | Alain | TERRIEUR | 10 | 01/01/2024 |
3 | Alain | PROVISTE | 20 | 15/09/2024 |
4 | Anne | ANAS | 20 | 01/01/2024 |
Les titres de colonnes
Nous n'avons pas besoin de les définir, car ils correspondent au nom des champs des fichiers JSON, XML ou CSV.
L'action ne peut traiter que 2 niveaux de sous-titres, ce qui me semble raisonnable pour la représentation dans un tableau.
En cas de dépassement, les données seront affichées sous une forme compacte. Voir maths pour Alain TERRIEUR
Voici un exemple avec ce shortcode qui utilise ce fichier :
{up data2table=images/actions-demo/data/school.json | style=display:block;overflow-x:scroll;}
Id | Nom | Age | Matières | Classe | Absences | |||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Physique | Français | SVT | Allemand | Maths | Anglais | 0 | 1 | 2 | ||||
1 | Alain TERRIEUR | 17 | 14 | 16 | 8 | spé: 16, expert: 14 | TS2 | 10/3/22 | 25/4/22 | 4/6/22 | ||
2 | Annie VERSAIRE | 16 | 10 | 12 | 13 | TS2 | ||||||
3 | Sarah TATOUILLE | 17 | 10 | 12 | 11 | TS2 | 16/2/22 | |||||
4 | Kelly DIOTE | 18 | 8 | 8 | 11 | TS2 |
Si vous avez regardé le fichier à l'origine de ce tableau, on constate que les 4 élèves n'ont ni les mêmes matières, ni les mêmes absences. De plus les informations ne sont pas dans le même ordre. L'action data2table s'en arrange fort bien !
Apportons quelques modifications :
Id | Nom | Age | Matières | Classe | Absences | |||||
---|---|---|---|---|---|---|---|---|---|---|
Physique | Français | SVT | Allemand | Maths | Anglais | |||||
1 | Alain TERRIEUR | 17 | 14 | 16 | 8 | spé: 16, expert: 14 | TS2 | 10/3/22, 25/4/22, 4/6/22 | ||
2 | Annie VERSAIRE | 16 | 10 | 12 | 13 | TS2 | ||||
3 | Sarah TATOUILLE | 17 | 10 | 12 | 11 | TS2 | 16/2/22 | |||
4 | Kelly DIOTE | 18 | 8 | 8 | 11 | TS2 |
avec ce shortcode :
{up data2table=images/actions-demo/data/school.json
| col-type=Absences:compact
| class=tc
| model=blue
| col-class=Matières:b t-green, Matières/Maths:b bg-yellow t-blue, Nom:tl b, Absences:tl}
- col-type: si pour les matières, la présence de sous-titres avec le nom de celles-ci se justifie, c'est inutile pour les absences. Il suffit le nom de la colonne concernée suivies d'un deux-points et du mot 'compact'.
- class : pour centrer toutes les cellules
- model : le nom d'une classe du fichier data2table.css. Vous pouvez créer une version modifiée de ce fichier dans le sous-dossier custom de l'action.
- col-class : cette option permet d'indiquer la ou les classes attribuées aux cellules d'une colonne du tableau. Il suffit d'indiquer le nom du champ et ses classes (pas de style inline). Pour les sous-colonnes, on peut affecter toutes les colonnes d'un groupe en utilisant son titre (
Matières
dans notre exemple pour le texte gras et vert) ou une sous-colonne en indiquant le chemin vers celle-ci (Matières/Maths
pour le fond jaune).
Version 3.1 l'option col-list permet de choisir et définir l'ordre des colonnes de niveau 1.
Pour mémoire, l'option col-include sélectionne uniquement les colonnes dont le label est dans la liste et col-exclude les désélectionne à la lecture des données avant l'application de la règle de col-list.
Exemple avec la première table de cette démo.
{up data2table=images/actions-demo/data/communes-13600.json
| col-list=code,nom}
code | nom |
---|---|
13023 | Ceyreste |
13028 | La Ciotat |
Type des colonnes
Les 3 actions "data" partagent des options que vous pouvez voir sur cette page
image | nom | description | lien vers démo |
---|---|---|---|
![]() | corner | un badge et ruban dans un angle | up.lomart.fr/demo/action-corner |
![]() | flexAuto | une grille responsive sur plusieurs colonnes | up.lomart.fr/demo/action-flexauto |
![]() | modal | du contenu dans une popup | up.lomart.fr/demo/action-modal |
![]() | osmap | affiche une carte OpenStreetMap | up.lomart.fr/demo/action-osmap |
![]() | popover | un popup lors d'un clic | up.lomart.fr/demo/action-popover |
![]() | pdf-gallery | propose la visualisation et le téléchargement de tous les fichiers PDF d'un dossier. | up.lomart.fr/demo/action-pdf-gallery |
Pour cette démo, j'utilise ce fichier créé pour l'occasion.
{up data2table=images/actions-demo/data/up-actions.csv
| col-type=image:image, lien vers démo:url
| image-path=images/actions/
| image-max-size=50px}
L'option col-type définit que la colonne "image" contiendra une image et que la colonne "lien vers démo" est une URL
Pour l'image, je précise le chemin pour l'atteindre ainsi que sa plus grande dimension
Trier la table
Pour proposer une fonction de tri ou de sélection de vos données en format table, le plus simple est d'utiliser l'action "table-sort". Voici un exemple
id | nom | population | superficie |
---|---|---|---|
FR-ARA | Auvergne-Rhône-Alpes | 7948287 | 69711 |
FR-BFC | Bourgogne-Franche-Comté | 2811423 | 47784 |
FR-BRE | Bretagne | 3318904 | 27209 |
FR-CVL | Centre-Val de Loire | 2576252 | 39151 |
FR-COR | Corse | 334938 | 8722 |
FR-GES | Grand Est | 5549586 | 57441 |
FR-HDF | Hauts-de-France | 6003815 | 31806 |
FR-IDF | Île-de-France | 12174880 | 12011 |
FR-NOR | Normandie | 3330478 | 29906 |
FR-NAQ | Nouvelle-Aquitaine | 5956978 | 84036 |
FR-OCC | Occitanie | 5845102 | 72724 |
FR-PDL | Pays de la Loire | 3757600 | 32082 |
FR-PAC | Provence-Alpes Côte d'Azur | 5030890 | 31400 |
FR-GUA | Guadeloupe | 390253 | 1628 |
FR-GUF | Guyane (française) | 268700 | 83846 |
FR-MTQ | Martinique | 372594 | 1128 |
FR-LRE | La Réunion | 853659 | 2512 |
FR-MAY | Mayotte | 256518 | 376 |
{up table-sort | col-type=a-i-n-n | pagination=10 }
{up data2table=files/mapael/france_regions_2016.csv}
{/up table-sort}
L'action data2table est inluse dans une action table-sort.avec 2 options :
- col-type pour indiquer la méthode de tri pour chaque colonne: alphabétique pour la première, non sensible min/maj pour la seconde et numérique pour les 2 dernières
- pagination limite le nombre de lignes
Le cache
Les actions data proposent un mécanisme de cache pour limiter les appel vers le serveur externe.
Outre la fiabilité de disposer d'une source locale, cela permet d'utiliser les formules gratuites des API, limitées en nombre d'utilisations journalières.
Il suffit d'indiquer le nombre de secondes avant d'actualiser les données : cache-delay=30
Par défaut, le délai est de 3600 secondes, soit 1 heure
upactionslist (1) readmore (2) csv2def (1) flexauto (2) modal (8) icon (4) flexbox (6) div (1) data2table (16) listup (3) table-by-rows (2) span (1) table-sort (1) jcontent-info (1) tabslide (1) toc (1)