responsive.details.display

Since: Responsive 2.0.0

Define how the hidden information should be displayed to the end user.
Please note - this property requires the Responsive extension for DataTables.

Description

Responsive provides the ability to show information about the columns it has hidden using DataTables child rows feature (row().child()), but you may wish to display the data in a different manner (potentially so you can use the child rows for other actions such as editing) - this parameter provides that ability.

The function given is responsible for showing and hiding the child data, usually when requested to do so by the end user (second parameter). It can be used to display information in child rows (as it is by default), in a modal pop-up, in a separate information element or even potentially to open a new window with a details view.

Responsive has a number of built in display functions which can be accessed from the $.fn.dataTable.Responsive.display object - the built in options are:

childRow - Show hidden information in a child row, the visibility of which can be toggled by an end user.
childRowImmediate - Show information in a child row, but don't wait for user request to show the data, just show it immediately.
modal() - Show information in a modal pop-up - please note that this is a function and should be executed when being assigned (see example below). This is to allow options to be passed into the modal library being used. When used with the Bootstrap, Foundation and jQuery UI integration options, Responsive will use use the styling framework's native modal display to ensure a consistent interface is displayed to the end user. The options that can be passed into the function depend upon the styling framework used:
- DataTables, Bootstrap and Foundation:
- header - a function that should return a string of what will be shown in the modal's header. A single parameter is passed in, the row() instance of the row whose details are being shown.
- jQuery UI:
- header - a function that should return a string of what will be shown in the modal's header. A single parameter is passed in, the row() instance of the row whose details are being shown.
- dialog - An object of dialog configuration control options as defined by the jQuery UI library.

Type

function display( row, update, render )

Parameters:

	Name	Type	Optional
1	`row`	`DataTables.Api`	No
	DataTables API instance for the table in question which is pre-populated with the row that is being acted upon - i.e. the result from `row()`.
2	`update`	`boolean`	No
	This parameter is used to inform the function what has triggered the function call: `true` - It is an automatic update caused by a change in column visibility, redrawing the table or some other action that is not the user specifically activating the row. `false` - End user trigger of the row. This should liken be used as a toggle (if the hidden details can be shown and hidden) or a show action if they can only be shown from the row (e.g. in a modal).
3	`render`	`function`	No
	The data to be shown - this is given as a function so it will be executed only when required (i.e. there is no point in gather data to display if the display function is simply going to hide it). The string returned by this function is that given by the `responsive.details.renderer` function. It accepts no input parameters.

Returns:

boolean

true if the display function has shown the hidden data, false if not. This information is used to trigger the events indicating if Responsive has shown or hidden information. If undefined is returned, no event will be triggered.

Default

Value: DataTable.Responsive.display.childRow

Examples

Use the childRowImmediate display option:

new DataTable('#myTable', {
	responsive: {
		details: {
			display: DataTable.Responsive.display.childRowImmediate,
			type: ''
		}
	}
});

Using modal without any options:

new DataTable('#myTable', {
	responsive: {
		details: {
			display: DataTable.Responsive.display.modal()
		}
	}
});

Using modal specifying a header:

new DataTable('#myTable', {
	responsive: {
		details: {
			display: DataTable.Responsive.display.modal({
				header: function (row) {
					var data = row.data();
					return 'Details for ' + data.clientName;
				}
			})
		}
	}
});