Skip to content

Commit

Permalink
Fixed typo in implementation Plan
Browse files Browse the repository at this point in the history
  • Loading branch information
Steve Bourgeois authored and Steve Bourgeois committed Nov 4, 2024
1 parent 00355d6 commit 1e3ba0b
Show file tree
Hide file tree
Showing 6 changed files with 360 additions and 30 deletions.
95 changes: 95 additions & 0 deletions méli-mélo/2024-10-datatable-utilities/datatable-utilities-doc-en.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
---
title: DataTable Utilities - Documentation
language: en
description: Utility to Manipulate JSON Data.
tag: DataTable
altLangPage: datatable-utilities-doc-fr.html
dateModified: 2024-11-01
---

<div class="wb-prettify all-pre"></div>

<div>
<h2>Configuration options</h2>

<p>Document the public configuration options that can be used by implementers or developers.</p>
<p>Enable the plugin for the Target Table by adding wb-tables-utility to the &lt;table&gt; element <code>&lt;table class=&quot;table wb-tables wb-tables-utility&quot;&gt; data-wb-tables-utility=&quot;{...}&quot;</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="{&amp;quot;debug&amp;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="{&amp;quot;filteredsum&amp;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 applied to a column, a column footer total is calcualted</td>
<td><code>&quot;columnDefs&quot;: [{ &quot;className&quot;: &quot;wb-col-sum&quot;, &quot;targets&quot;: [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>&quot;columnDefs&quot;: [{ &quot;className&quot;: &quot;wb-col-money&quot;, &quot;targets&quot;: [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>&quot;columnDefs&quot;: [{ &quot;className&quot;: &quot;wb-col-cur-thousand&quot;, &quot;targets&quot;: [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 &lt;a href=&quot;mailto:...&quot;&gt;...&lt;/a&gt; to make it a clikcable link.</td>
<td><code>&quot;columnDefs&quot;: [{ &quot;className&quot;: &quot;wb-col-mailto&quot;, &quot;targets&quot;: [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 &lt;a href=&quot;column-name-url&quot;&gt;column-name&lt;/a&gt; to make it a clikcable link.</td>
<td><code>&quot;columnDefs&quot;: [{ &quot;className&quot;: &quot;wb-col-url&quot;, &quot;targets&quot;: [3]}]</code></td>
<td>
wb-col-url
</td>
</tr>
</tbody>
</table>
96 changes: 96 additions & 0 deletions méli-mélo/2024-10-datatable-utilities/datatable-utilities-doc-fr.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
---
title: DataTable Utilities - Documentation
language: fr
description: Utility to Manipulate JSON Data.
tag: DataTable
altLangPage: datatable-utilities-doc-fr.html
dateModified: 2024-11-01
---

<div class="wb-prettify all-pre"></div>

<div>
<h2>Configuration options</h2>

<p>Document the public configuration options that can be used by implementers or developers.</p>

<p>Enable the plugin for the Target Table by adding wb-tables-utility to the &lt;table&gt; element <code>&lt;table class=&quot;table wb-tables wb-tables-utility&quot;&gt; data-wb-tables-utility=&quot;{...}&quot;</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="{&amp;quot;debug&amp;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="{&amp;quot;filteredsum&amp;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 applied to a column, a column footer total is calcualted</td>
<td><code>&quot;columnDefs&quot;: [{ &quot;className&quot;: &quot;wb-col-sum&quot;, &quot;targets&quot;: [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>&quot;columnDefs&quot;: [{ &quot;className&quot;: &quot;wb-col-money&quot;, &quot;targets&quot;: [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>&quot;columnDefs&quot;: [{ &quot;className&quot;: &quot;wb-col-cur-thousand&quot;, &quot;targets&quot;: [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 &lt;a href=&quot;mailto:...&quot;&gt;...&lt;/a&gt; to make it a clikcable link.</td>
<td><code>&quot;columnDefs&quot;: [{ &quot;className&quot;: &quot;wb-col-mailto&quot;, &quot;targets&quot;: [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 &lt;a href=&quot;column-name-url&quot;&gt;column-name&lt;/a&gt; to make it a clikcable link.</td>
<td><code>&quot;columnDefs&quot;: [{ &quot;className&quot;: &quot;wb-col-url&quot;, &quot;targets&quot;: [3]}]</code></td>
<td>
wb-col-url
</td>
</tr>
</tbody>
</table>
91 changes: 78 additions & 13 deletions ...024-10-datatable-utilities/index-eng.html → ...2024-10-datatable-utilities/index-en.html
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
---
title: DataTable Utilities
dateModified: 2024-10-01
dateModified: 2024-10-31
description: "Utilities that allow Columns to be MONEY Formatted, Emails wrapped with mailto, url's to be clickable and Footer totals that can be affected by filtered Data Or not."
lang: en
altLangPage: "index-fra.html"
altLangPage: "index-fr.html"
script: [ "js/wb-pspc-datatable-utility.js" ]
css: [ "css/wb-pspc-datatable-utility.css"]
---
Expand All @@ -30,7 +30,23 @@ <h2>GCWeb implementation plan</h2>

<p>Sponsor: PSPC - {{ implPlan.sponsor }}</p>

<h2>Control Table with Raw Data</h2>
<div class="panel panel-default">
<header class="panel-heading">
<h2 class="panel-title">On this page</h2>
</header>
<div class="panel-body">
<ul>
<li><a href="datatable-utilities-doc-en.html">Configuration Options</a></li>
<li><a href="#a1">Control Table with Raw Data</a></li>
<li><a href="#a2">Column Data Manipulation Example 1</a></li>
<li><a href="#a3">Column Data Manipulation Example 2</a></li>
<li><a href="#a4">Table Footer With Static Totals</a></li>
<li><a href="#a5">Table Footer With Dynamic Totals updated when Filtered</a></li>
</ul>
</div>
</div>

<h2 id="a1">Control Table with Raw Data</h2>

<div class="mrgn-bttm-lg">
<table class="wb-tables table table-striped table-hover table-condensed small" id="t1" data-wb-tables='{ "ajax":"data/datatable-utility.json", "columns": [
Expand Down Expand Up @@ -64,11 +80,11 @@ <h2>Control Table with Raw Data</h2>
</table>
</div>

<h2>Column Data Manipulation Example</h2>
<h2 id="a2">Column Data Manipulation Example 1</h2>

<ul>
<li><code>.wb-col-mailto</code> Wrap email Addresses with a &lt;a href=&quot;mailto:...&quot;&gt;[email protected]&lt;/a&gt;</li>
<li><code>.wb-col-money</code> Formnat numbers as Money.</li>
<li><code>.wb-col-money</code> Format numbers as Money.</li>
<li><code>.wb-col-url</code> Stitch 2 columns (column-name, column-name-url) into a single URL / Caption or URL and URL as the caption if (column-name-url) does not exists within the JSON File.</li>
</ul>

Expand Down Expand Up @@ -117,7 +133,56 @@ <h2>Column Data Manipulation Example</h2>
</table>
</div>

<h2>Table Footer With Static Totals</h2>
<h2 id="a3">Column Data Manipulation Example 2</h2>

<p><code>.wb-col-cur-thousand</code> Format numbers with thousands separator with 2 decimals.</p>

<pre class="mrgn-bttm-lg">
&lt;table class=&quot;wb-tables table table-striped table-hover table-condensed small <strong>wb-tables-utility</strong>&quot; id=&quot;t3&quot;
data-wb-tables=&apos;{ &quot;ajax&quot;:&quot;data/datatable-utility.json&quot;,
&quot;columns&quot;: [{ &quot;data&quot;: &quot;DepartmentEN&quot; },
{ &quot;data&quot;: &quot;ContactEmail&quot; },
{ &quot;data&quot;: &quot;Custom study titleEN&quot; },
{ &quot;data&quot;: &quot;Registration number&quot; },
{ &quot;data&quot;: &quot;Contract value&quot; }],
&quot;columnDefs&quot;: [{ &quot;className&quot;: &quot;text-left&quot;, &quot;targets&quot;: [0]},
{ &quot;className&quot;: &quot;text-left&quot;, &quot;targets&quot;: [1] },
{ &quot;className&quot;: &quot;text-left&quot;, &quot;targets&quot;: [2] },
{ &quot;className&quot;: &quot;text-left&quot;, &quot;targets&quot;: [3] },
{ &quot;className&quot;: &quot;text-right <strong>wb-col-cur-thousand</strong>&quot;, &quot;targets&quot;: [4] }],
&quot;lengthMenu&quot;: [ [5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, &quot;All&quot;] ]}&apos;&gt;
</pre>

<div class="mrgn-bttm-lg">
<table class="wb-tables table table-striped table-hover table-condensed small wb-tables-utility" id="t3" data-wb-tables='{ "ajax":"data/datatable-utility.json", "columns": [
{ "data": "DepartmentEN" },
{ "data": "ContactEmail" },
{ "data": "Custom study titleEN" },
{ "data": "Registration number" },
{ "data": "Contract value" }
],
"columnDefs": [{ "className": "text-left", "targets": [0]},
{ "className": "text-left", "targets": [1] },
{ "className": "text-left", "targets": [2] },
{ "className": "text-left", "targets": [3] },
{ "className": "text-right wb-col-cur-thousand", "targets": [4] }],
"lengthMenu": [ [5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "All"] ]}'>
<caption class="text-left">
Table&nbsp;3: Second Example of JSON Data Manipulation
</caption>
<thead>
<tr class="active">
<th scope="col">Department</th>
<th scope="col">Contact Email</th>
<th scope="col">Custom study</th>
<th scope="col">Reg#</th>
<th scope="col">Contract value</th>
</tr>
</thead>
</table>
</div>

<h2 id="a4">Table Footer With Static Totals</h2>

<p><code>.wb-col-sum</code> class on the column to perform column Total</p>
<p>Add a Placehoder &lt;tfoot&gt; at the bottom of the Table.</p>
Expand All @@ -135,7 +200,7 @@ <h3>Code</h3>
<p>Pass <code>false</code> via filteredsum to the plugin <code>data-wb-tables-utility="{"filteredsum":false}"</code> as the default is true</p>

<pre class="mrgn-bttm-lg">
&lt;table class=&quot;wb-tables table table-striped table-hover table-condensed small <strong>wb-tables-utility</strong>&quot; id=&quot;t3&quot;
&lt;table class=&quot;wb-tables table table-striped table-hover table-condensed small <strong>wb-tables-utility</strong>&quot; id=&quot;t4&quot;
<strong>data-wb-tables-utility="{&quot;filteredsum&quot;:false}"</strong>
data-wb-tables=&apos;{ &quot;ajax&quot;:&quot;data/datatable-utility.json&quot;,
&quot;columns&quot;: [{ &quot;data&quot;: &quot;DepartmentEN&quot; },
Expand All @@ -152,7 +217,7 @@ <h3>Code</h3>
</pre>

<div class="mrgn-bttm-lg">
<table class="wb-tables table table-striped table-hover table-condensed small wb-tables-utility" id="t3" data-wb-tables-utility="{&quot;debug&quot;:true, &quot;filteredsum&quot;:false}" data-wb-tables='{ "ajax":"data/datatable-utility.json", "columns": [
<table class="wb-tables table table-striped table-hover table-condensed small wb-tables-utility" id="t4" data-wb-tables-utility="{&quot;debug&quot;:true, &quot;filteredsum&quot;:false}" data-wb-tables='{ "ajax":"data/datatable-utility.json", "columns": [
{ "data": "DepartmentEN" },
{ "data": "ContactEmail" },
{ "data": "Custom study titleEN" },
Expand All @@ -166,7 +231,7 @@ <h3>Code</h3>
{ "className": "text-right wb-col-money wb-col-sum", "targets": [4] }],
"lengthMenu": [ [5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "All"] ]}'>
<caption class="text-left">
Table&nbsp;3: Static Totals in Table Footer Example
Table&nbsp;4: Static Totals in Table Footer Example
</caption>
<thead>
<tr class="active">
Expand All @@ -186,7 +251,7 @@ <h3>Code</h3>
</table>
</div>

<h2>Table Footer With Dynamic Totals updated when Filtered</h2>
<h2 id="a5">Table Footer With Dynamic Totals updated when Filtered</h2>

<p><code>.wb-col-sum</code> class on the column to perform column Total</p>
<p>Add a Placehoder &lt;tfoot&gt; at the bottom of the Table.</p>
Expand All @@ -203,7 +268,7 @@ <h2>Table Footer With Dynamic Totals updated when Filtered</h2>
<h3>Code</h3>

<pre class="mrgn-bttm-lg">
&lt;table class=&quot;wb-tables table table-striped table-hover table-condensed small <strong>wb-tables-utility</strong>&quot; id=&quot;t4&quot;
&lt;table class=&quot;wb-tables table table-striped table-hover table-condensed small <strong>wb-tables-utility</strong>&quot; id=&quot;t5&quot;
data-wb-tables=&apos;{ &quot;ajax&quot;:&quot;data/datatable-utility.json&quot;,
&quot;columns&quot;: [{ &quot;data&quot;: &quot;DepartmentEN&quot; },
{ &quot;data&quot;: &quot;ContactEmail&quot; },
Expand All @@ -219,7 +284,7 @@ <h3>Code</h3>
</pre>

<div class="mrgn-bttm-lg">
<table class="wb-tables table table-striped table-hover table-condensed small wb-tables-utility" id="t4" data-wb-tables='{ "ajax":"data/datatable-utility.json", "columns": [
<table class="wb-tables table table-striped table-hover table-condensed small wb-tables-utility" id="t5" data-wb-tables='{ "ajax":"data/datatable-utility.json", "columns": [
{ "data": "DepartmentEN" },
{ "data": "ContactEmail" },
{ "data": "Custom study titleEN" },
Expand All @@ -233,7 +298,7 @@ <h3>Code</h3>
{ "className": "text-right wb-col-money wb-col-sum", "targets": [4] }],
"lengthMenu": [ [5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "All"] ]}'>
<caption class="text-left">
Table&nbsp;4: Dynamic Totals in Table Footer Example
Table&nbsp;5: Dynamic Totals in Table Footer Example
</caption>
<thead>
<tr class="active">
Expand Down
Loading

0 comments on commit 1e3ba0b

Please sign in to comment.