Tables

Exemple

Ajoutes des fonctionnalités aux tableaux telles que la recherche, le tri, le filtrage et la pagination.

Exemple de base

<table class="wb-tables table">

Exemple d'options

Le DataTables API (en anglais seulement) est entièrement accessible par le data-wb-tables attribut à l'aide d'un tableau JSON.

<table class="wb-tables table table-striped table-hover" data-wb-tables='{ "ordering": false }'>

Exemple de pagination

L'action de changer le nombre d'entrées à afficher dans une table ou bien le fait d'avoir un petit nombre de rangées ajusteront la pagination de cette table en conséquence. Si toutes les rangées peuvent être contenues dans une seule page, alors la pagination ne sera pas visible.

Exemple avec une pagination en haut du tableau

Ajouter la pagination au-dessus du tableau en le gardant en dessous en utilisant la configuration suivante: data-wb-tables='{"ordering" : false, "dom":"<\u0027top\u0027pfil>rt<\u0027bottom\u0027p><\u0027clear\u0027>"}'

Filtering Examples

Find the plugin for the action you need:

• Date Range, Drop-Down List and Checkbox Filters
• Number Range Filters (Integers, floats, currency, etc)
• Autres filtres

Provisionel - Emphase sur l'interface de filtrage

Le style suivant est une expérimentation coordonné par le Bureau de la transformation numérique ayant pour objectif d'améliorer la visibilité de l'interface de filtrage du tableau lorsque l'utilisateur fait défiler le contenu de la page.

Code source

<table class="wb-tables table filterEmphasis provisional">
	...
</table>