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

Publication date
For
Location
Advanced Options
Title Publication date Department News Type Summary Location For Subject Minister

Creating Date Range, Drop-Down List and/or Checkbox Filters

  1. Create a <form> with the following attributes class="wb-tables-filter" and data-bind-to="TABLE_ID".

  2. For date range create two date inputs (<input type="date"/>) add the following attribute data-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.

  3. For drop-down list create a select list (<select>) add the following attribute data-column="COLUMN_NUMBER"

    Only assign one drop-down list a single column number (no duplicates). Please note that the column numbers start at 0.

  4. For checkboxes create a checkbox list (<input type="checkbox">) assign each the following attribute data-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).

  1. Add data-aopts='{"type": "", "column": ""}' arrtibute to any radio 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="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

Age
Advanced Options
Salary
Taxes
Id First Name Last Name Age Salary Taxes

Creating Number Range Filters

  1. Create a <form> with the following attributes class="wb-tables-filter" and data-bind-to="TABLE_ID".

  2. Create two number fields (<input type="number">) assign each the following attribute data-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).

  1. Add data-aopts='{"type": "", "column": ""}' arrtibute to any radio element to apply the advanced options.
  2. Available filter types:
    1. EITHER - This option will return all entries that are either equal to/greater then A OR/AND equal to/less then B.
    2. AND - This option will only return entries that are equal to/greater then A AND equal to/less then B.
  3. 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>
Date modified: