The filtering component allows you to quickly and easily display just the rows you want to see by providing a simple search input.
See the Getting started - Examples section for examples of this component.
The below lists all the options for the filtering component, these are available in addition to the core options.
Whether or not the component is enabled.
false
By default this component is disabled, no UI or features of this component will be available.
To supply this option through data attributes you must specify the attribute on the table element.
<table data-filtering="true">
...
</table>The below shows how to supply the value directly through the options.
jQuery(function($){
$('.table').footable({
"filtering": {
"enabled": true
}
});
});An array of filters to apply to the tables rows.
A filter is a simple object containing a name, a query and an array of columns. The name is used purely as an identifier so duplicate
filters are not applied. The query is the string that is used when determining whether a row should be included in the results or not.
The columns specify which cell values from a row are used when applying the query. The columns values can be supplied as either an index (zero based) or as
the name of the column.
[]
The below shows what one of the filter objects would look like.
var filter = {
"name": string,
"query": string,
"columns": array
};To supply filters through data attributes you must follow valid JSON syntax including quoted property names.
<table data-filter-filters='[{"name":"my-filter","query":"The value","columns":["id"]}]'>
...
</table>The below shows how to supply the value directly through the options.
jQuery(function($){
$('.table').footable({
"filtering": {
"filters": [{
"name": "my-filter",
"query": "The value",
"columns": ["id"]
}]
}
});
});name is used to avoid applying duplicate filters and when removing existing ones.query is the value used to actually filter the rows with.columns array is used to specify which columns the query applies to, the array values can be either the
name or the zero based index of the column.
Whether or not to replace phrase connectors (+.-_) with spaces before filtering the rows.
true
By default the plugin will replace phrase connectors (+.-_) with spaces before filtering the rows.
To supply this option through data attributes you must specify the attribute on the table element.
<table class="table" data-filter-connectors="true">
...
</table>The below shows how to supply the value directly through the options.
jQuery(function($){
$('.table').footable({
"filtering": {
"connectors": true
}
});
});A selector specifying where to place the filtering components form.
null
By default the form is displayed within a row in the head of the table. By specifying a selector nothing is displayed in the table and the form is instead appended to the first element matched by the selector.
To supply this option through data attributes you must specify the attribute on the table element.
<div id="filter-form-container"></div>
<table class="table" data-filter-container="#filter-form-container">
...
</table>The below shows how to supply the value directly through the options.
jQuery(function($){
$('.table').footable({
"filtering": {
"container": "#filter-form-container"
}
});
});The number of milliseconds before a search input filter is applied after it changes.
1200
By default the plugin waits 1.2 seconds (1200 milliseconds) before auto applying a new search filter, setting this option to any value equal to or less than zero will disable this feature.
To supply this option through data attributes you must specify the attribute on the table element.
<table class="table" data-filter-delay="-1">
...
</table>The below shows how to supply the value directly through the options.
jQuery(function($){
$('.table').footable({
"filtering": {
"delay": -1
}
});
});The title to display at the top of the search input column select.
null
By default no title is displayed, you must supply a string value for one to be added.
To supply this option through data attributes you must specify the attribute on the table element.
<table class="table" data-filter-dropdown-title="Search in:">
...
</table>The below shows how to supply the value directly through the options.
jQuery(function($){
$('.table').footable({
"filtering": {
"dropdownTitle": "Search in:"
}
});
});Whether or not search queries are treated as phrases when matching.
false
By default to match an exact phrase a search query must be wrapped in quotation marks.
To supply this option through data attributes you must specify the attribute on the table element.
<table class="table" data-filter-exact-match="true">
...
</table>The below shows how to supply the value directly through the options.
jQuery(function($){
$('.table').footable({
"filtering": {
"exactMatch": true
}
});
});Whether or not to focus the search input after the search/clear button is clicked or after auto applying the search input query.
true
By default the search input will receive focus after the search/clear button is clicked or after auto applying the search input query.
To supply this option through data attributes you must specify the attribute on the table element.
<table class="table" data-filter-focus="true">
...
</table>The below shows how to supply the value directly through the options.
jQuery(function($){
$('.table').footable({
"filtering": {
"focus": true
}
});
});Whether or not to ignore case when filtering.
true
By default the plugin will ignore case as it provides a more natural feel to querying.
To supply this option through data attributes you must specify the attribute on the table element.
<table class="table" data-filter-ignore-case="false">
...
</table>The below shows how to supply the value directly through the options.
jQuery(function($){
$('.table').footable({
"filtering": {
"ignoreCase": false
}
});
});The minimum number of characters in the search input before auto applying the filter.
1
To supply this option through data attributes you must specify the attribute on the table element.
<table class="table" data-filter-min="4">
...
</table>The below shows how to supply the value directly through the options.
jQuery(function($){
$('.table').footable({
"filtering": {
"min": 4
}
});
});The placeholder text displayed within the search input.
"Search"
To supply this option through data attributes you must specify the attribute on the table element.
<table class="table" data-filter-placeholder="Suche">
...
</table>The below shows how to supply the value directly through the options.
jQuery(function($){
$('.table').footable({
"filtering": {
"placeholder": "Suche"
}
});
});The position of the search input within the filter row.
"right"
The other supported values for this option are "left" and "center"
To supply this option through data attributes you must specify the attribute on the table element.
<table class="table" data-filter-position="center">
...
</table>The below shows how to supply the value directly through the options.
jQuery(function($){
$('.table').footable({
"filtering": {
"position": "center"
}
});
});Specifies how to treat whitespace in a filter query.
When evaluating a filter query this option specifies how whitespace in a string is treated. By default all whitespace is treated as an AND operator meaning
that a row must contain all parts of the query, the parts are created by splitting the query on whitespace. When changed to OR a row must contain only a
single part of the query to be included in the results.
"AND"
The only other supported value is "OR" for this option.
To supply this option through data attributes you must specify the attribute on the table element.
<table class="table" data-filter-space="OR">
...
</table>The below shows how to supply the value directly through the options.
jQuery(function($){
$('.table').footable({
"filtering": {
"space": "OR"
}
});
});The function used to retrieve the filter value for a cell.
To improve the performance of the component all cells provide a string value to be used during filtering operations. Using a string value avoids having to perform any type conversions in an already expensive operation, this function is called whenever a cells filter value needs to be set.
null
By default the column will use its types filterValue function.
string
To supply the function through data attributes it must be defined as a named JavaScript function with the name supplied as the attribute value.
function myFilterValue(valueOrElement){
if (FooTable.is.element(valueOrElement) || FooTable.is.jq(valueOrElement)) return jQuery(valueOrElement).data('filterValue') || jQuery(valueOrElement).text();
if (FooTable.is.hash(valueOrElement) && FooTable.is.hash(valueOrElement.options)){
if (FooTable.is.string(valueOrElement.options.filterValue)) return valueOrElement.options.filterValue;
if (FooTable.is.defined(valueOrElement.value)) valueOrElement = valueOrElement.value;
}
if (FooTable.is.defined(valueOrElement) && valueOrElement != null) return valueOrElement+'';
return '';
}<table>
<thead>
<tr>
<th data-filter-value="myFilterValue">...</th>
...
</tr>
</thead>
...
</table>The below shows how to supply the value directly through the options.
jQuery(function($){
$('.table').footable({
"columns": [{
"filterValue": function(valueOrElement){
if (FooTable.is.element(valueOrElement) || FooTable.is.jq(valueOrElement)) return jQuery(valueOrElement).data('filterValue') || jQuery(valueOrElement).text();
if (FooTable.is.hash(valueOrElement) && FooTable.is.hash(valueOrElement.options)){
if (FooTable.is.string(valueOrElement.options.filterValue)) return valueOrElement.options.filterValue;
if (FooTable.is.defined(valueOrElement.value)) valueOrElement = valueOrElement.value;
}
if (FooTable.is.defined(valueOrElement) && valueOrElement != null) return valueOrElement+'';
return '';
}
},{
...
}]
});
});The first argument (valueOrElement) is either the td element, the jQuery wrapper around the td element or a value that needs to be parsed.
Whether or not the column is included in a rows value when filtering.
true
All columns can be searched by default, this would only need to be changed if a columns contents can not be represented as a string.
To supply this option through data attributes you must specify the attribute on the cell element.
<table>
<thead>
<tr>
<th data-filterable="false">...</th>
...
</tr>
</thead>
...
</table>The below shows how to supply the value directly through the options.
jQuery(function($){
$('.table').footable({
"columns": [{
"filterable": false
},{
...
}]
});
});The value used by the component to perform filtering operations.
""
To supply this option through data attributes you must specify the attribute on the td element.
<table>
<tr>
<td data-filter-value="My Filter Value">...</td>
...
</tr>
...
</table>The below shows how to supply the value directly through the options.
jQuery(function($){
$('.table').footable({
"rows": [{
"id": {
"options": {
"filterValue": "My Filter Value"
},
"value": ...
}
},{
...
}]
});
});If no filter value is supplied for a cell the result of the default toString method executed on it's value will be used.
By default the filtering component treats all whitespace as an AND operator,
this behavior can be changed using the space option.
The below example is probably the way most queries would be created which is why how whitespace is treated is very important.
The difference between the results returned when using the AND and OR
operators are very different. One would generally make the query more specific while the other would expand it to include more results.
john smith
The above query would match all rows containing both john and smith.
While the space option changes how whitespace is treated there are also the following basic operators that allow you to
build up more advanced queries.
Make a query more specific by separating additional parts with a capitalized AND string.
john AND smith
The above query would match all rows containing both john and smith.
Expand a query by separating additional parts with a capitalized OR string.
john OR smith
The above query would match all rows containing john or smith.
Exclude a value from the results by prefixing it with a minus - sign.
john -smith
The above query would match all rows containing the word john but would exclude any containing smith.
Match an exact word or phrase by wrapping it in quotes ".
"brown fox"
The above query would match all rows containing the exact phrase brown fox.
Match empty values by using double quotes "".
""