searchPanes

Since: SearchPanes 1.0.0

A single button that displays the SearchPanes container in a popover.
Please note - this property requires the SearchPanes extension for DataTables.

Description

This button type creates a popover that contains the SearchPanes container. This allows SearchPanes to be used without it taking up extra space in the dom.

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

`action`

Type: function
Default: Unset

The action function for the SearchPanes button displays the SearchPanes container to the user in a popover.

`config`

Type: object
Default: {}

Configuration options for SearchPanes - see searchPanes. All SearchPanes options can be used here.

`delayInit`

Type: boolean
Default: true
Since: 2.3.0

By default SearchPanes will not be initialised until the button to show it is pressed. While this helps spread the initial start up time, allowing a faster response for the end user at table start up time, there are cases where you might wish to have SearchPanes initialise immediately, such as if you are using a predefined SearchPane filter.

`init`

Type: function
Default: Unset

For the SearchPanes button the init function sets up SearchPanes so that it is ready to be used immediately when the user presses the button.

`text`

Type: string
Default: Search Panes

This options allows the text within the button to be configured. This can also be configured with the searchPanes.collapse option of the DataTables language option.

Examples

Basic SearchPanes button initialisation:

new DataTable('#myTable', {
	layout: {
		topStart: {
			buttons: ['searchPanes']
		}
	}
});

SearchPanes configuration using a button:

new DataTable('#myTable', {
	layout: {
		topStart: {
			buttons: [
				{
					extend: 'searchPanes',
					config: {
						cascadePanes: true
					}
				}
			]
		}
	}
});

Initialise SearchPanes during the table initialisation:

new DataTable('#myTable', {
	layout: {
		topStart: {
			buttons: [
				{
					extend: 'searchPanes',
					config: {
						delayInit: false
					}
				}
			]
		}
	}
});