- Passer au contenu principal
- Passer à « À propos de ce site »

# 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

- English example
- French example

## How to implement

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 }'>

## 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

Date de modification :
  2014-10-28