search

Since: ColumnControl 1.0.0

Display a column search input, suitable for the column's data.
Please note - this property requires the ColumnControl extension for DataTables.

Description

This content type adds a column search that is suitable for the column's data type as detected by DataTables. This makes column search much easier to configure than needing to manually specify types, as you can simply use search and it will pick the best input type from the following (in this order):

searchList - only used if allowSearchList is enabled and there are options for the column in the JSON response for the Ajax request.
searchDateTime - if the column's data has been detected as date / time values.
searchNumber - if the column's data is numeric.
searchText - default if none of the conditions above match.

Options for this content type are "passthrough". Any option set will be passed on to the underlying search input. Please refer to the documentation for each of the content types above for full details of the options available to them.

Examples showing the use of this content type are available on the DataTables website.

Display

It is expected that this content type will have a full cell to draw in if used at the top level, as it benefits from having a large amount of space available (i.e. other buttons won't be used along with it at the top level for a specific set of cells).

In a dropdown this content type will display as part of the regular content list.

Options

This button can have the following options set in its configuration object to customise its actions and display, in addition to those options which are available for all buttons (e.g. buttons.buttons.text):

`ajaxOnly`

Type: boolean
Default: true

Only relevant if searchList is selected for use. When enabled (true) and Ajax loaded data is used for the table (ajax) this option will cause the list of options to be shown only if the options are specified in the JSON response (i.e. the options will not be automatically determined from the data). If Ajax is not used for the table, this option has no effect.

`allowSearchList`

Type: boolean
Default: false

If enabled, and data is loaded for the table via Ajax, and there are options for this column in the JSON response, then rather than using a text based input, a search list (searchList) will be shown for this column.

`clear`

Type: boolean
Default: true

Indicate if a clear icon should be shown at the end of the search input element. When enabled a cross icon will be shown when the input has a value and clicking on the icon will clear the search.

`placeholder`

Type: string
Default: ``

Value to set the placeholder attribute of the input element to.

`search`

Type: boolean
Default: false

Only relevant if searchList is selected for use. The toggle list can show a search box which allows the list of column names to be searched. This can be useful if you have a large number of columns in the table.

`select`

Type: boolean
Default: false

Only relevant if searchList is selected for use. This option will show "Select all" and "Select none" links at the top of the toggle list, allowing quick interaction for the end user.

`title`

Type: string
Default: ``

Text shown above the input, which can be used to tell the end user information about what the search will do. The given string will have the substring [title] will be replaced with the column title.

`titleAttr`

Type: string
Default: ``

Value to set the title attribute of the search input element which can be used to help with accessability. The given string will have the substring [title] will be replaced with the column title.

Example

Show search inputs in a second row in the table header.:

new DataTable('#example', {
    columnControl: [
        {
            target: 0,
            content: ['orderStatus']
        },
        {
            target: 1,
            content: ['search']
        }
    ],
    ordering: {
        indicators: false
    }
});