search
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 ifallowSearchList
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
}
});