Tables
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
- Add class
wb-tables
to the table tag of the table you wish to enhance. - 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.
- Add
data-aopts='{"type": "", "column": ""}'
arrtibute to any checkbox element to apply the advanced options. -
Available filter types:
- ANY - This option will return entries that contain either A or B, or both.
- BOTH - This option will only return entries that contain both A and B.
- EITHER - This option will return all entries that are just A or just B - and not combinations of the two.
- AND - This option will only return entries that are a combination of A or B.
- 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)
|
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.
|
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.
|
*.dt events (e.g., xhr.dt |
Events triggered automatically by DataTables (documentation on DataTables events. | Used by DataTables to identify what events are occurring.
|
Source code
Signaler un problème sur cette page
- Date de modification :