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.
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
-
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.
Options
Options
Utilisez les options ci-dessous pour modifier vos résultats dans le tableau suivant.
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>
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.
Id | Prénom | Nom de famille | Âge | Salaire | Impôts |
---|
- Date de modification :