responsive.details.display

Since: Responsive 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 show 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.
    • modal - An object of dialog configuration control options as defined by the jQuery UI library.

Type

function display( row, update, render )

Parameters:
Returns:

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: $.fn.dataTable.Responsive.display.childRow

Examples

Use the childRowImmediate display option:

$('#example').DataTable( {
	responsive: {
		details: {
			display: $.fn.dataTable.Responsive.display.childRowImmediate,
			type: ''
		}
	}
} );

Using modal without any options:

$('#example').DataTable( {
	responsive: {
		details: {
			display: $.fn.dataTable.Responsive.display.modal()
		}
	}
} );

Using modal specifying a header:

$('#example').DataTable( {
	responsive: {
		details: {
			display: $.fn.dataTable.Responsive.display.modal( {
				header: function ( row ) {
					var data = row.data();
					return 'Details for '+data.clientName;
				}
			} )
		}
	}
} );