# Tables

Questions or comments?

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

### 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 ) {
    });
    $( ".wb-tables" ).on( "xhr.dt", function( event ) {
    });

## Source code

Tables plugin source code on GitHub

Date modified:
  2014-10-28