Sélection de la langue

Gouvernement du Canada / Government of Canada

Recherche

Tables

Questions ou commentaires?

Purpose

Integrates the DataTables plugin into WET providing searching, sorting, filtering, pagination and other advanced features for tables.

Use when

Displaying large tables, to ease searching, sorting and filtering of information.

Working example

How to implement

DataTables

  1. Add class wb-tables to the table tag of the table you wish to enhance.
  2. Modify the default configuration by passing a JSON array through the data-wb-tables attribute of the table tag.
<table class="wb-tables table table-striped table-hover" data-wb-tables='{ "ordering" : false }'>

Advanced Options

Allows the user to change how checkboxes are filtered.

  1. Add data-aopts='{"type": "", "column": ""}' arrtibute to any checkbox element to apply the advanced options.
  2. Available filter types:
    1. ANY - This option will return entries that contain either A or B, or both.
    2. BOTH - This option will only return entries that contain both A and B.
    3. EITHER - This option will return all entries that are just A or just B - and not combinations of the two.
    4. AND - This option will only return entries that are a combination of A or B.
  3. Column is the checkboxes that the filter well apply too (must match there 'data-column').
<label for="advanced_options1_1"><input type="radio" name="advanced_options1" id="advanced_options1_1" data-aopts='{"type": "any", "column": "5"}' checked />Any</label>

Configuration options

All configuration options are detailed in the DataTables documentation and is fully accessible via the data-wb-tables attribute or window[ "wb-tables" ].

Events

Event Trigger What it does
wb-init.wb-tables Triggered manually (e.g., $( ".wb-tables" ).trigger( "wb-init.wb-tables" );). Used to manually initialize the Tables plugin. Note: The Tables plugin will be initialized automatically unless the required markup is added after the page has already loaded.
wb-ready.wb-tables (v4.0.5+) Triggered automatically after Data Tables has been initialized. Used to identify where Data Tables was initialized (target of the event) 
$( document ).on( "wb-ready.wb-tables", ".wb-tables", function( event ) {
});
$( ".wb-tables" ).on( "wb-ready.wb-tables", function( event ) {
});
wb-updated.wb-tables (v4.0.5+) Triggered automatically after a DataTable table was updated (extension of the draw.dt event). Used to identify which table was updated (target of the event) and to pass along the DataTables settings object. 
$( document ).on( "wb-updated.wb-tables", ".wb-tables", function( event, settings ) {
});
$( ".wb-tables" ).on( "wb-updated.wb-tables", function( event, settings ) {
});
wb-ready.wb (v4.0.5+) Triggered automatically when WET has finished loading and executing. Used to identify when all WET plugins and polyfills have finished loading and executing. 
$( document ).on( "wb-ready.wb", function( event ) {
});
*.dt events (e.g., xhr.dt Events triggered automatically by DataTables (documentation on DataTables events. Used by DataTables to identify what events are occurring. 
$( document ).on( "xhr.dt", ".wb-tables", function( event ) {
});
$elm.on( "xhr.dt", function( event ) {
});

Source code

Tables plugin source code on GitHub

Signaler un problème sur cette page
Veuillez cocher toutes les réponses pertinentes :

Merci de votre aide!

Vous ne recevrez pas de réponse. Pour toute question, s’il vous plaît contactez-nous.

Date de modification :