Utilitaire DataTable
Sur cette page
- Table de contrôle avec données brute
- Exemple 1 de manipulation des données de colonne
- Exemple 2 de manipulation des données de colonne
- Pied de page de table avec totaux statiques
- Pied de page de table avec totaux dynamiques mis à jour lors du filtrage
Table de contrôle avec données brute
| Ministère | Courriel | Titre de l’étude multi-intérêts | URL de l’étude multi-intérêts | Reg# | Valeur des contrats |
|---|
Exemple 1 de manipulation des données de colonne
.wb-col-mailtoEntourer les adresses courriels avec un <a href="mailto:...">email@example.net</a>.wb-col-moneyFormater les nombres en tant que montant d'argent..wb-col-urlFusionner 2 colonnes (nom-colonne, nom-colonne-url) en une seule URL / Sous-titre ou URL et URL comme sous-titre si (nom-colonne-url) n'existe pas dans le fichier JSON.
<table class="wb-tables table table-striped table-hover table-condensed small wb-tables-utility" id="t2"
data-wb-tables='{ "ajax":"data/datatable-utility.json",
"columns": [{ "data": "DepartmentFR" },
{ "data": "ContactEmail" },
{ "data": "Custom study titleFR" },
{ "data": "Registration number" },
{ "data": "Contract value" }],
"columnDefs": [{ "className": "text-left", "targets": [0]},
{ "className": "text-left wb-col-mailto", "targets": [1] },
{ "className": "text-left wb-col-url", "targets": [2] },
{ "className": "text-left", "targets": [3] },
{ "className": "text-right wb-col-money", "targets": [4] }],
"lengthMenu": [ [5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "All"] ]}'>
| Ministère | Courriel | Titre de l’étude multi-intérêts | Reg# | Valeur des contrats |
|---|
Exemple 2 de manipulation des données de colonne
.wb-col-cur-thousand Formater les nombres en tant que montant d'argent sans le signe $.
<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": "DepartmentFR" },
{ "data": "ContactEmail" },
{ "data": "Custom study titleFR" },
{ "data": "Registration number" },
{ "data": "Contract value" }],
"columnDefs": [{ "className": "text-left", "targets": [0]},
{ "className": "text-left wb-col-mailto", "targets": [1] },
{ "className": "text-left wb-col-url", "targets": [2] },
{ "className": "text-left", "targets": [3] },
{ "className": "text-right wb-col-money", "targets": [4] }],
"lengthMenu": [ [5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "All"] ]}'>
| Ministère | Courriel | Titre de l’étude multi-intérêts | Reg# | Valeur des contrats |
|---|
Pied de page de table avec totaux statiques
.wb-col-sum classe sur la colonne pour effectuer le total de la colonne.
Ajouter un espace réservé <tfoot> en bas de la table.
<tfoot>
<tr class="active">
<th colspan="4">Total</th>
<td> </td>
</tr>
</tfoot>
Code
Définissez le paramètre filteredsum a « false » dans le plugiciel data-wb-tables-utility="{\"filteredsum\":false}", car la valeur par défaut est « true ».
<table class="wb-tables table table-striped table-hover table-condensed small wb-tables-utility" id="t4"
data-wb-tables-utility="{"filteredsum":false}"
data-wb-tables='{ "ajax":"data/datatable-utility.json",
"columns": [{ "data": "DepartmentFR" },
{ "data": "ContactEmail" },
{ "data": "Custom study titleFR" },
{ "data": "Registration number" },
{ "data": "Contract value" }],
"columnDefs": [{ "className": "text-left", "targets": [0]},
{ "className": "text-left wb-col-mailto", "targets": [1] },
{ "className": "text-left wb-col-url", "targets": [2] },
{ "className": "text-left", "targets": [3] },
{ "className": "text-right wb-col-sum wb-col-money", "targets": [4] }],
"lengthMenu": [ [5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "All"] ]}'>
| Ministère | Courriel | Titre de l’étude multi-intérêts | Reg# | Valeur des contrats |
|---|---|---|---|---|
| Total | ||||
Pied de page de table avec totaux dynamiques mis à jour lors du filtrage
.wb-col-sum classe sur la colonne pour effectuer le total de la colonne.
Ajouter un espace réservé <tfoot> en bas de la table.
<tfoot>
<tr class="active">
<th colspan="4">Total</th>
<td> </td>
</tr>
</tfoot>
Code
<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": "DepartmentFR" },
{ "data": "ContactEmail" },
{ "data": "Custom study titleFR" },
{ "data": "Registration number" },
{ "data": "Contract value" }],
"columnDefs": [{ "className": "text-left", "targets": [0]},
{ "className": "text-left wb-col-mailto", "targets": [1] },
{ "className": "text-left wb-col-url", "targets": [2] },
{ "className": "text-left", "targets": [3] },
{ "className": "text-right wb-col-sum wb-col-money", "targets": [4] }],
"lengthMenu": [ [5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "All"] ]}'>
| Ministère | Courriel | Titre de l’étude multi-intérêts | Reg# | Valeur des contrats |
|---|---|---|---|---|
| Total | ||||
Détails de la page
- Date de modification :