Table Filters

Exemples

Ajoutes des fonctionnalités aux tableaux telles que la recherche, le tri, le filtrage et la pagination.

Date Range, Drop-Down List and Checkbox Filters

Options

Options

Utilisez les options ci-dessous pour modifier vos résultats dans le tableau suivant.

Publication date
For
Location
Advanced Options
Titre Date de publication Département Type de nouvelles Résumé Emplacement Public Suject Ministre

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.

Options

Options

Utilisez les options ci-dessous pour modifier vos résultats dans le tableau suivant.

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>

Autres filtres

Il est également possible de filtrer à l'aide de texte ou de chiffres.

Options

Options

Utilisez les options ci-dessous pour modifier vos résultats dans le tableau suivant.

Âge
Nom
Id Prénom Nom de famille Âge Salaire Impôts
Date de modification :