buttons.buttons.split

Since: Buttons 2.0.0

Split dropdown buttons.
Please note - this property requires the Buttons extension for DataTables.

Description

This property is an alias of the feature property buttons.buttons.split and can be used to configure the feature from the top level DataTables configuration object, rather than in the layout option (see example below). This lets you use the feature as a string rather than an object, but it does restrict the configuration if you were using multiple instances of the feature. Please refer to the documentation for buttons.buttons.split for full details and options that apply to this option.

If you are using DataTables 1.x, which does not have the layout option, use this property name, but referring to the documentation for buttons.buttons.split for full details.

Examples

Split dropdown button for printing options:

new DataTable('#myTable', {
	layout: {
		topStart: 'buttons'
	},
	buttons: [
		{
			extend: 'csv',
			split: ['pdf', 'excel']
		}
	]
});

Split dropdown button with custom buttons:

new DataTable('#myTable', {
	layout: {
		topStart: 'buttons'
	},
	buttons: [
		{
			text: 'High priority',
			action: function () {
				/* ... */
			},
			split: [
				{
					text: 'Medium priority',
					action: function () {
						/* ... */
					}
				},
				{
					text: 'Low priority',
					action: function () {
						/* ... */
					}
				}
			]
		}
	]
});

Split dropdown button with a mix of custom buttons and built in buttons:

new DataTable('#myTable', {
	layout: {
		topStart: 'buttons'
	},
	buttons: [
		{
			text: 'High priority',
			action: function () {
				/* ... */
			},
			split: [
				'pdf',
				{
					text: 'Medium priority',
					action: function () {
						/* ... */
					}
				},
				{
					text: 'Low priority',
					action: function () {
						/* ... */
					}
				}
			]
		}
	]
});

Custom HTML within popovers:

new DataTable('#myTable', {
	layout: {
		topStart: 'buttons'
	},
	buttons: [
		{
			extend: 'collection',
			className: 'custom-html-collection',
			buttons: [
				'<h3>Export</h3>',
				'pdf',
				'csv',
				'excel',
				'<h3 class="not-top-heading">Column Visibility</h3>',
				'colvis'
			]
		}
	]
});