{hero}

searchDropdown

Since: ColumnControl 1.0.0

A dropdown wrapper for the search content type.
Please note - this property requires the ColumnControl extension for DataTables.

Description

This content type matches search, but places it inside a dropdown. It is provided for convenience, and it is relatively common to have the search inputs in a dropdown, due to the amount of space they take. It is simply an alias of:

{
    extend: 'dropdown',
    text: 'Search',
    icon: 'search',
    content: [{
        extend: 'search'
        // ... options from `search`
    }]
}

Note that this content type provides the same options as search - it simply passes them through, so you can still control which columns are selected, etc. For a full list of the options available, please refer to search. Only the dropdown-specific options are shown on this page.

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

Display

This content type can be used at any level in ColumnControl. At the top level, it will create a dropdown icon. Inside a dropdown, it will create a nested dropdown.

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):

icon

  • Type: string
  • Default: search

Button icon. Can take the name of any icon available in DataTable.ColumnControl.icons (which is a writeable object containing SVG icons).

text

  • Type: string
  • Default: Search

Text of the dropdown button - shown when it is in a dropdown itself. Can also be set by the searchDropdown key of language.columnControl, which will take priority if set.

Examples

List search options in a dropdown:

new DataTable('#example', {
    columnControl: ['searchDropdown']
});

Search dropdown and ordering icon:

new DataTable('#example', {
    columnControl: [
        'order',
        'searchDropdown'
    ],
    ordering: {
        indicators: false,
        handler: false
    }
});

Nested dropdown:

new DataTable('#example', {
    columnControl: [
        'order',
        [
           'orderAsc',
		   'orderDesc',
		   'searchDropdown'
        ]
    ]
    ordering: {
        indicators: false,
        handler: false
    }
});