FooTable V3 — Class: Filtering

new Filtering(table) → {FooTable.Filtering}

The filtering component adds a search input and column selector dropdown to the table allowing users to filter the using space delimited queries.

Parameters:

Name	Type	Description
`table`	FooTable.Table	The parent FooTable.Table object for the component.

Returns:

Type: FooTable.Filtering

Extends

FooTable.Component

Members

$button :jQuery

The jQuery object of the search button.

Type:

jQuery

$cell :jQuery

The jQuery cell object that contains the search input and column selector.

Type:

jQuery

$container :jQuery

The jQuery object of the element containing the entire filtering form.

Type:

jQuery

$dropdown :jQuery

The jQuery object of the column selector dropdown.

Type:

jQuery

$form :jQuery

The jQuery form object of the form that contains the search input and column selector.

Type:

jQuery

$input :jQuery

The jQuery object of the search input.

Type:

jQuery

$row :jQuery

The jQuery row object that contains all the filtering specific elements.

Type:

jQuery

<private> _exactRegExp :RegExp

The regular expression used to check for encapsulating quotations.

Type:

RegExp

<private, nullable> _filterTimeout :number

The timeout ID for the filter changed event.

Type:

number

connectors :boolean

Whether or not to replace phrase connectors (+.-_) with spaces before executing the query.

Type:

boolean

container :string

A selector specifying where to place the filtering components form, if null the form is displayed within a row in the head of the table.

Type:

string

delay :number

The delay in milliseconds before the query is auto applied after a change.

Type:

number

dropdownTitle :string

The title to display at the top of the search input column select.

Type:

string

enabled :boolean

Whether or not this component is enabled. Disabled components only have there preinit method called allowing for this value to be overridden.

Type:

boolean

Inherited From:

FooTable.Component#enabled

exactMatch :boolean

Whether or not search queries are treated as phrases when matching.

Type:

boolean

filters :Array.<FooTable.Filter>

The filters to apply to the current FooTable.Rows#array.

Type:

Array.<FooTable.Filter>

focus :boolean

Whether or not to focus the search input after the search/clear button is clicked or after auto applying the search input query.

Type:

boolean

ft :FooTable.Table

The parent FooTable.Table for the component.

Type:

FooTable.Table

Inherited From:

FooTable.Component#ft

ignoreCase :boolean

Whether or not ignore case when matching.

Type:

boolean

min :number

The minimum number of characters allowed in the search input before it is auto applied.

Type:

number

placeholder :string

The placeholder text to display within the search $input.

Type:

string

position :string

The position of the $search input within the filtering rows cell.

Type:

string

space :string

Specifies how whitespace in a filter query is handled.

Type:

string

Methods

<static> find(name) → {FooTable.Filter|null}

Finds a filter by name.

Parameters:

Name	Type	Description
`name`	string	The name of the filter to find.

Returns:

Type: FooTable.Filter | null

<protected> $create()

Creates the filtering UI from the current options setting the various jQuery properties of this component.

This:

FooTable.Filtering

<private> _onDocumentClicked(e)

Checks all click events when the dropdown is visible and closes the menu if the target is not the dropdown.

Parameters:

Name	Type	Description
`e`	jQuery.Event	The event object for the event.

<private> _onDropdownToggleClicked(e)

Handles the click event for the FooTable.Filtering#$dropdown toggle.

Parameters:

Name	Type	Description
`e`	jQuery.Event	The event object for the event.

<private> _onSearchButtonClicked(e)

Handles the click event for the FooTable.Filtering#$button.

Parameters:

Name	Type	Description
`e`	jQuery.Event	The event object for the event.

<private> _onSearchColumnClicked(e)

Handles the click event for the column checkboxes in the FooTable.Filtering#$dropdown.

Parameters:

Name	Type	Description
`e`	jQuery.Event	The event object for the event.

<private> _onSearchInputChanged(e)

Handles the change event for the FooTable.Filtering#$input.

Parameters:

Name	Type	Description
`e`	jQuery.Event	The event object for the event.

addFilter(nameOrFilter, query, columns, ignoreCase, connectors, space, hidden)

Adds or updates the filter using the supplied name, query and columns.

Parameters:

Name	Type	Argument	Default	Description
`nameOrFilter`	string \| FooTable.Filter \| object			The name for the filter or the actual filter object itself.
`query`	string \| FooTable.Query	<optional>		The query for the filter. This is only optional when the first parameter is a filter object.
`columns`	Array.<number> \| Array.<string> \| Array.<FooTable.Column>	<optional>		The columns to apply the filter to. If not supplied the filter will be applied to all selected columns in the search input dropdown.
`ignoreCase`	boolean	<optional>	true	Whether or not ignore case when matching.
`connectors`	boolean	<optional>	true	Whether or not to replace phrase connectors (+.-_) with spaces.
`space`	string	<optional>	"AND"	How the query treats space chars.
`hidden`	boolean	<optional>	true	Whether or not this is a hidden filter.

clear() → {jQuery.Promise}

Removes the current search filter.

Fires:

Returns:

Type: jQuery.Promise

columns() → {Array.<FooTable.Column>}

Gets an array of FooTable.Column to apply the search filter to. This also doubles as the default columns for filters which do not specify any columns.

Returns:

Type: Array.<FooTable.Column>

createFilter(nameOrObject, query, columns, ignoreCase, connectors, space, hidden) → {*}

Creates a new filter using the supplied object or individual parameters to populate it.

Parameters:

Name	Type	Argument	Default	Description
`nameOrObject`	string \| FooTable.Filter \| object			The name for the filter or the actual filter object itself.
`query`	string \| FooTable.Query	<optional>		The query for the filter. This is only optional when the first parameter is a filter object.
`columns`	Array.<number> \| Array.<string> \| Array.<FooTable.Column>	<optional>		The columns to apply the filter to. If not supplied the filter will be applied to all selected columns in the search input dropdown.
`ignoreCase`	boolean	<optional>	true	Whether or not ignore case when matching.
`connectors`	boolean	<optional>	true	Whether or not to replace phrase connectors (+.-_) with spaces.
`space`	string	<optional>	"AND"	How the query treats space chars.
`hidden`	boolean	<optional>	true	Whether or not this is a hidden filter.

Returns:

Type: *

<protected> destroy()

Destroys the filtering component removing any UI from the table.

Fires:

FooTable.event:Filtering"destroy.ft.filtering"

<protected> draw()

As the rows are drawn by the FooTable.Rows#draw method this simply updates the colspan for the UI.

ensure(filters) → {Array.<FooTable.Filter>}

Takes an array of plain objects containing the filter values or actual FooTable.Filter objects and ensures that an array of only FooTable.Filter is returned. If supplied a plain object that object must contain a name, query and columns properties which are used to create a new FooTable.Filter.

Parameters:

Name	Type	Description
`filters`	Object \| Array.<FooTable.Filter>	The array of filters to check.

Returns:

Type: Array.<FooTable.Filter>

filter(focus) → {jQuery.Promise}

Performs the required steps to handle filtering including the raising of the FooTable.Filtering#"before.ft.filtering" and FooTable.Filtering#"after.ft.filtering" events.

Parameters:

Name	Type	Argument	Default	Description
`focus`	boolean	<optional>	false	Whether or not to set the focus to the input once filtering is complete.

Fires:

Returns:

Type: jQuery.Promise

<protected> init()

Initializes the filtering component for the plugin.

Fires:

FooTable.event:Filtering"init.ft.filtering"

<protected> postdraw()

This method is called from the FooTable.Table#draw method.

Inherited From:

FooTable.Component#postdraw

<protected> predraw()

Performs the filtering of rows before they are appended to the page.

<protected> preinit(data)

Checks the supplied data and options for the filtering component.

Parameters:

Name	Type	Description
`data`	object	The jQuery data object from the parent table.

Fires:

FooTable.event:Filtering"preinit.ft.filtering"

removeFilter(name)

Removes the filter using the supplied name if it exists.

Parameters:

Name	Type	Description
`name`	string	The name of the filter to remove.

setButton(search)

Toggles the button icon between the search and clear icons based on the supplied value.

Parameters:

Name	Type	Description
`search`	boolean	Whether or not to display the search icon.