searchText
A string based search input for the column.
Please note - this property requires the ColumnControl extension for DataTables.
Description
This content type adds a input element to the ColumnControl content list, allowing the end user to perform string-based searches on a column.
It should be noted that search should generally be used rather than this one directly, as search will select the most appropriate search input based on the column type, however, this content type is available for use if needed.
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):
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. The given string will have the substring [title] will be replaced with the column title.
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 input elements in the second row of the table header.:
new DataTable('#example', {
columnControl: [
{
target: 0,
content: ['orderStatus']
},
{
target: 1,
content: ['searchText']
}
],
ordering: {
indicators: false
}
});