Utilitaires DataTables - Documentation
Les utilitaires de table de données incluent des classes de manipulation de données pour les courriels, les URL et l’argent. Ils comprennent également des totaux dans le pied de page de la table de données.
L'intégration de ce plugin facilitera la transition vers Canada.ca, car ces fonctionnalités sont déjà mises en œuvre sur https://www.tpsgc-pwgsc.gc.ca. Actuellement, certaines pages utilisant ce plugiciel, ainsi que d'autres pages qui utilisent différents JavaScripts, sont simplement liées directement de Canada.ca.
Pour le grand public, le plugiciel rend les tables de données plus conviviales en fournissant des liens cliquables, et les utilisateurs sont déjà habitués à cette fonctionnalité sur nos anciennes pages Canada.ca.
Plan de mise en œuvre de GCWeb
- 2024-09-24 - Dévélopement initial Completé
- 2024-10-01 - Obtenir des rétroaction de l'équipe Wet-Boew avant la demande de tirage Completé
- 2024-10-08 - Corriger tout problèmes identifiés par l'équipe Wet-Boew Completé
- 2024-10-12 - Faire traduire la page d'exemple en français Completé
- 2024-10-15 - Soumettre les pages à notre processus de CQ et à notre équipe ECAW Completé
- 2024-10-22 - Corriger les problèmes identifiés et les problèmes d'accessibilité Completé
- 2024-10-24 - Soumettre la demandes de tirage Completé
- 2025-11-30 - Produce accessibility conformance report A faire
- 2025-06-30 - Travailler vers un plugiciel provisoire En cours
Todo and for future consideration
- Envisager d'ajouter d'autres classes de manipulation de données (pourcentage)?
Commanditaire : SPAC - Steve Bourgeois (steve.bourgeois@tpsgc-pwgsc.gc.ca)
Exemples pratiques
Options de configuration
Activez le plugiciel pour le tableau ciblé en ajoutant la classe CSS wb-tables-utility au tableau. Ajoutez l'attribut data-wb-tables-utility pour configurer les options.
| Option | Description | How to configure | Values |
|---|---|---|---|
| debug | Print Debug messages to the console | data-wb-tables-utility="{"debug":true}" |
|
| filteredsum | Column Totals to reflect Filtered DataTable Data | data-wb-tables-utility="{"filteredsum":false}" |
|
| wb-col-sum | When this class is applied to a column, a column footer total is calculated | "columnDefs": [{ "className": "wb-col-sum", "targets": [3]}] |
wb-col-sum |
| wb-col-money | When this class is applied to a column, the data is manipulated to reflect currency with $ | "columnDefs": [{ "className": "wb-col-money", "targets": [3]}] |
wb-col-money |
| wb-col-cur-thousand | When this class is applied to a column, the data is manipulated to reflect currency without $ | "columnDefs": [{ "className": "wb-col-cur-thousand", "targets": [3]}] |
wb-col-cur-thousand |
| wb-col-mailto | When this class is applied to a column, the data is searched with an email partern, and when found are wrapped with <a href="mailto:...">...</a> to make it a clikcable link. | "columnDefs": [{ "className": "wb-col-mailto", "targets": [3]}] |
wb-col-mailto |
| wb-col-url | When this class is applied to a column, dataTable Utilites looks for a second column with the same name as this column that is ending with -url and the 2 are stiched into a single column wrapped with <a href="column-name-url">column-name</a> to make it a clikcable link. | "columnDefs": [{ "className": "wb-col-url", "targets": [3]}] |
wb-col-url |
Détails de la page
- Date de modification :