# Class: Filtering

## FooTable.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

#### $dropdown :jQuery

The jQuery object of the column selector dropdown.

##### 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, 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

#### delay :number

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

##### Type:

- number

#### 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

#### filters :Array.<FooTable.Filter>

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

##### Type:

- Array.<FooTable.Filter>

#### ft :FooTable.Table

The parent `FooTable.Table` for the component.

##### Type:

- FooTable.Table

Inherited From:
  - FooTable.Component#ft

#### 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) addFilter(name, query, columns)

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

##### Parameters:

Name | Type | Description
--- | --- | ---
`name` | string | The name for the filter.
`query` | string | FooTable.Query | The query for the filter.
`columns` | Array.<number> | Array.<string> | Array.<FooTable.Column> | The columns to apply the filter to.

#### (static) 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.

#### (protected) $create()

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

##### This:

- FooTable.Filtering

#### (private) _filter() → {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.

##### Fires:

- FooTable.event:Filtering"before.ft.filtering"
- FooTable.event:Filtering"after.ft.filtering"

##### Returns:

Type
  jQuery.Promise

#### (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.

#### clear() → {jQuery.Promise}

Removes the current search filter.

##### Fires:

- FooTable.event:Filtering"before.ft.filtering"
- FooTable.event:Filtering"after.ft.filtering"

##### 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>

#### (protected) destroy()

Destroys the filtering component removing any UI from the table.

Overrides:
  - FooTable.Component#destroy

##### 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.

Overrides:
  - FooTable.Component#draw

#### 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(queryopt, columnsopt) → {jQuery.Promise}

Creates a new search filter from the supplied parameters and applies it to the rows. If no parameters are supplied the current search input value and selected columns are used to create or update the search filter. If there is no search input value then the search filter is removed.

##### Parameters:

Name | Type | Attributes | Description
--- | --- | --- | ---
`query` | string | <optional> | The query to filter the rows by.
`columns` | Array.<string> | Array.<number> | Array.<FooTable.Column> | <optional> | The columns to apply the filter to in each row.

##### Fires:

- FooTable.event:Filtering"before.ft.filtering"
- FooTable.event:Filtering"after.ft.filtering"

##### Returns:

Type
  jQuery.Promise

#### (protected) init()

Initializes the filtering component for the plugin.

Overrides:
  - FooTable.Component#init

##### 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.

Overrides:
  - FooTable.Component#predraw

#### (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.

Overrides:
  - FooTable.Component#preinit

##### Fires:

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