-
Notifications
You must be signed in to change notification settings - Fork 132
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Steve Bourgeois
authored and
Steve Bourgeois
committed
Nov 4, 2024
1 parent
00355d6
commit 6f293fb
Showing
6 changed files
with
391 additions
and
69 deletions.
There are no files selected for viewing
121 changes: 121 additions & 0 deletions
121
méli-mélo/2024-10-datatable-utilities/datatable-utilities-doc-en.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,121 @@ | ||
| --- | ||
| title: DataTable Utilities - Documentation | ||
| language: en | ||
| description: Utility to Manipulate JSON Data. | ||
| tag: DataTable | ||
| altLangPage: datatable-utilities-doc-fr.html | ||
| dateModified: 2024-11-01 | ||
| --- | ||
|
|
||
| <p>DataTable Utilities, includes Data Manipulation Classes for emails, Urls and Money. Also Includes Datatable Footer Totals.</p> | ||
| <p>Having this plugin intergrated will make the transition to Canada.ca easier as these features are already in use on https://www.tpsgc-pwgsc.gc.ca, currently some of the pages that make use of this plugin and other pages that make use of Other Javascripts are just pointed to from Canada.ca</p> | ||
| <p>The Public at Large, the plugin makes DataTables more user friendly with Clickable Links, and they are used to this functionality our PRE Canada.ca Pages.</p> | ||
|
|
||
| <h2>GCWeb implementation plan</h2> | ||
|
|
||
| {% assign implPlan = site.pages | where: "output", "false" | where: "componentName", "2024-10-datatable-utilities" | first %} | ||
|
|
||
| <ul> | ||
| {% for deliverable in implPlan.implementationPlan %} | ||
| <li>{{ deliverable.due }} - {{ deliverable.what }}</li> | ||
| {% endfor %} | ||
| </ul> | ||
|
|
||
| <p>Todo and for future consideration</p> | ||
| <ul> | ||
| {% for todo in implPlan.todos %} | ||
| <li>{{ todo }}</li> | ||
| {% endfor %} | ||
| </ul> | ||
|
|
||
| <p>Sponsor: PSPC - {{ implPlan.sponsor }}</p> | ||
|
|
||
| <div class="wb-prettify all-pre"></div> | ||
|
|
||
| <h2>Working examples</h2> | ||
| <ul> | ||
| <li><a href="index-en.html">DataTables utilities</a></li> | ||
| </ul> | ||
|
|
||
| <h2>Configuration options</h2> | ||
|
|
||
| <p>Enable the plugin for the Target Table by adding wb-tables-utility to the <table> element <code><table class="table wb-tables wb-tables-utility"> data-wb-tables-utility="{...}"</code></p> | ||
| <table class="table"> | ||
| <thead> | ||
| <tr> | ||
| <th>Option</th> | ||
| <th>Description</th> | ||
| <th>How to configure</th> | ||
| <th>Values</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td>debug</td> | ||
| <td>Print Debug messages to the console</td> | ||
| <td><code>data-wb-tables-utility="{&quot;debug&quot;:true}"</code></td> | ||
| <td> | ||
| <dl> | ||
| <dt>false (default)</dt> | ||
| <dd>Suppress Printing of debug messages.</dd> | ||
| <dt>true</dt> | ||
| <dd>Show debug messages to the console.</dd> | ||
| </dl> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>filteredsum</td> | ||
| <td>Column Totals to reflect Filtered DataTable Data</td> | ||
| <td><code>data-wb-tables-utility="{&quot;filteredsum&quot;:false}"</code></td> | ||
| <td> | ||
| <dl> | ||
| <dt>true (default):</dt> | ||
| <dd>As Data is Filtered adjust Totals to match filtered Data.</dd> | ||
| <dt>false:</dt> | ||
| <dd>Show Grand Total Regardless of data filtered.</dd> | ||
| </dl> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>wb-col-sum</td> | ||
| <td>When this class is applied to a column, a column footer total is calculated</td> | ||
| <td><code>"columnDefs": [{ "className": "wb-col-sum", "targets": [3]}]</code></td> | ||
| <td> | ||
| wb-col-sum | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>wb-col-money</td> | ||
| <td>When this class is applied to a column, the data is manipulated to reflect currency with $</td> | ||
| <td><code>"columnDefs": [{ "className": "wb-col-money", "targets": [3]}]</code></td> | ||
| <td> | ||
| wb-col-money | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>wb-col-cur-thousand</td> | ||
| <td>When this class is applied to a column, the data is manipulated to reflect currency without $</td> | ||
| <td><code>"columnDefs": [{ "className": "wb-col-cur-thousand", "targets": [3]}]</code></td> | ||
| <td> | ||
| wb-col-cur-thousand | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>wb-col-mailto</td> | ||
| <td>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.</td> | ||
| <td><code>"columnDefs": [{ "className": "wb-col-mailto", "targets": [3]}]</code></td> | ||
| <td> | ||
| wb-col-mailto | ||
| </td> | ||
| </tr> | ||
| <tr>(column-name, column-name-url) | ||
| <td>wb-col-url</td> | ||
| <td>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.</td> | ||
| <td><code>"columnDefs": [{ "className": "wb-col-url", "targets": [3]}]</code></td> | ||
| <td> | ||
| wb-col-url | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> |
121 changes: 121 additions & 0 deletions
121
méli-mélo/2024-10-datatable-utilities/datatable-utilities-doc-fr.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,121 @@ | ||
| --- | ||
| title: Utilitaires DataTables - Documentation | ||
| language: fr | ||
| description: Utility to Manipulate JSON Data. | ||
| tag: DataTable | ||
| altLangPage: datatable-utilities-doc-fr.html | ||
| dateModified: 2024-11-01 | ||
| --- | ||
| <p>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.</p> | ||
| <p>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.</p> | ||
| <p>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.</p> | ||
|
|
||
| <h2>Plan de mise en œuvre de GCWeb</h2> | ||
|
|
||
| {% assign implPlan = site.pages | where: "output", "false" | where: "componentName", "2024-10-datatable-utilities" | first %} | ||
|
|
||
| <ul> | ||
| {% for deliverable in implPlan.implementationPlanFR %} | ||
| <li>{{ deliverable.due }} - {{ deliverable.what }}</li> | ||
| {% endfor %} | ||
| </ul> | ||
|
|
||
| <p>Todo and for future consideration</p> | ||
| <ul> | ||
| {% for todo in implPlan.todosFR %} | ||
| <li>{{ todo }}</li> | ||
| {% endfor %} | ||
| </ul> | ||
|
|
||
| <p>Commanditaire : SPAC - {{ implPlan.sponsor }}</p> | ||
|
|
||
| <div class="wb-prettify all-pre"></div> | ||
|
|
||
| <h2>Examples</h2> | ||
| <ul> | ||
| <li><a href="index-fr.html">Utilitaire DataTable</a></li> | ||
| </ul> | ||
|
|
||
| <h2>Options de configuration</h2> | ||
|
|
||
| <p>Enable the plugin for the Target Table by adding wb-tables-utility to the <table> element <code><table class="table wb-tables wb-tables-utility"> data-wb-tables-utility="{...}"</code></p> | ||
|
|
||
| <table class="table"> | ||
| <thead> | ||
| <tr> | ||
| <th>Option</th> | ||
| <th>Description</th> | ||
| <th>How to configure</th> | ||
| <th>Values</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td>debug</td> | ||
| <td>Print Debug messages to the console</td> | ||
| <td><code>data-wb-tables-utility="{&quot;debug&quot;:true}"</code></td> | ||
| <td> | ||
| <dl> | ||
| <dt>false (default)</dt> | ||
| <dd>Suppress Printing of debug messages.</dd> | ||
| <dt>true</dt> | ||
| <dd>Show debug messages to the console.</dd> | ||
| </dl> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>filteredsum</td> | ||
| <td>Column Totals to reflect Filtered DataTable Data</td> | ||
| <td><code>data-wb-tables-utility="{&quot;filteredsum&quot;:false}"</code></td> | ||
| <td> | ||
| <dl> | ||
| <dt>true (default):</dt> | ||
| <dd>As Data is Filtered adjust Totals to match filtered Data.</dd> | ||
| <dt>false:</dt> | ||
| <dd>Show Grand Total Regardless of data filtered.</dd> | ||
| </dl> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>wb-col-sum</td> | ||
| <td>When this class is applied to a column, a column footer total is calculated</td> | ||
| <td><code>"columnDefs": [{ "className": "wb-col-sum", "targets": [3]}]</code></td> | ||
| <td> | ||
| wb-col-sum | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>wb-col-money</td> | ||
| <td>When this class is applied to a column, the data is manipulated to reflect currency with $</td> | ||
| <td><code>"columnDefs": [{ "className": "wb-col-money", "targets": [3]}]</code></td> | ||
| <td> | ||
| wb-col-money | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>wb-col-cur-thousand</td> | ||
| <td>When this class is applied to a column, the data is manipulated to reflect currency without $</td> | ||
| <td><code>"columnDefs": [{ "className": "wb-col-cur-thousand", "targets": [3]}]</code></td> | ||
| <td> | ||
| wb-col-cur-thousand | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>wb-col-mailto</td> | ||
| <td>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.</td> | ||
| <td><code>"columnDefs": [{ "className": "wb-col-mailto", "targets": [3]}]</code></td> | ||
| <td> | ||
| wb-col-mailto | ||
| </td> | ||
| </tr> | ||
| <tr>(column-name, column-name-url) | ||
| <td>wb-col-url</td> | ||
| <td>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.</td> | ||
| <td><code>"columnDefs": [{ "className": "wb-col-url", "targets": [3]}]</code></td> | ||
| <td> | ||
| wb-col-url | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> |
Oops, something went wrong.