Table Filters
Examples
Integrates the DataTables plugin into WET providing searching, sorting, filtering, pagination and other advanced features for tables.
Date Range, Drop-Down List and Checkbox Filters
Filtering Options
Filter Options
Use filters to below options to change the focus of your results in following data table
Title | Publication date | Department | News Type | Summary | Location | For | Subject | Minister |
---|
Creating Date Range, Drop-Down List and/or Checkbox Filters
-
Create a
<form>
with the following attributesclass="wb-tables-filter"
anddata-bind-to="TABLE_ID"
. -
For date range create two date inputs (
<input type="date"/>
) add the following attributedata-column="COLUMN_NUMBER"
Example:
<input type="date" class="form-control" id="dt_mindate" name="dt_mindate" data-column="1"/>
Each date input requires the same column number. Please note that the column numbers start at 0.
-
For drop-down list create a select list (
<select>
) add the following attributedata-column="COLUMN_NUMBER"
Only assign one drop-down list a single column number (no duplicates). Please note that the column numbers start at 0.
-
For checkboxes create a checkbox list (
<input type="checkbox">
) assign each the following attributedata-column="COLUMN_NUMBER"
Each checkbox requires the same column number. Please note that the column numbers start at 0.
Accepted Formats for Date Range
Currently only accepts ISO 8601 (YYYY-MM-DD). See examples below.
- 2016-07-26T14:07:00
- 2016-07-26 14:07:00
- 2016-07-26
Advanced Options For Checkboxes
Allows the user to change how checkboxes are filtered (default is ANY).
- Add
data-aopts='{"type": "", "column": ""}'
arrtibute to any radio 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="dt_location_aopts1"><input type="radio" name="dt_location_aopts" id="dt_location_aopts1" data-aopts='{"type": "any", "column": "5"}' checked />Any</label>
Number Range Filters (Integers, floats, currency, etc)
This filter accepts the positive or negative integers, floats with a maximum of two decimal points (E.g. 1.0/1.00 or 1,0/1,00), or Canadian/French Canadian currency (E.g. $1.00/1,00 $). DataTable data can be a actual number or string containing number.
Filtering Options
Filter Options
Use filters to below options to change the focus of your results in following data table
Id | First Name | Last Name | Age | Salary | Taxes |
---|
Creating Number Range Filters
-
Create a
<form>
with the following attributesclass="wb-tables-filter"
anddata-bind-to="TABLE_ID"
. -
Create two number fields (
<input type="number">
) assign each the following attributedata-column="COLUMN_NUMBER"
.Each number field requires the same column number. Please note that the column numbers start at 0.
Advanced Options For Number Range
Allows the user to change how number range is filtered (default is EITHER).
- Add
data-aopts='{"type": "", "column": ""}'
arrtibute to any radio element to apply the advanced options. -
Available filter types:
- EITHER - This option will return all entries that are either equal to/greater then A OR/AND equal to/less then B.
- AND - This option will only return entries that are equal to/greater then A AND equal to/less then B.
- Column is the number range that the filter well apply too (must match there 'data-column').
<label for="dt_age_aopts1"><input type="radio" name="dt_age_aopts" id="dt_age_aopts1" data-aopts='{"type": "either", "column": "5"}' checked />Either</label>
Other Filters
It is also possible to filter using text or numbers
Filtering Options
Filter Options
Use filters to below options to change the focus of your results in following data table
Id | First Name | Last Name | Age | Salary | Taxes |
---|
Page details
- Date modified: