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

Evaluation and report

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

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" ].

To filter a table using the filter's exact value, add the attribute data-exact="true" to the filter. For example: <select class="form-control" id="filterName" name="filterName" data-column="0" data-exact="true"></select>

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: