copyHtml5

Copy table data to clipboard button (HTML).
Please note - this property requires the Buttons extension for DataTables.

Description

This button provides a simple copy-to-clipboard action to the end user, copied the table's data to the system clipboard. In most cases this will just be automatically available on the users clipboard, but if your browser doesn't support the required APIs for that a message is shown to the end user inviting them to use their keyboard or the Edit menu to copy the table's data. The copy is done from an almost completely hidden textarea element so the end user won't see it, but the browser is still above to give the textarea focus and select the text.

When the user activates the copy command the dialogue box is dismissed. They can also click on the box or press escape to dismiss it without performing the copy action.

If your table has a header or footer with multiple rows, these will all be included in the export. If the header or footer contains colspan or rowspan cells, they will be filled in by an empty string, since this is a plain text export and has no way to represent cells that span over others.

There are a number of language strings that can be set to configure the messages shown to the end user - these are set in the buttons property of the language configuration option of the DataTable (see below for examples) - these are, including the default values:

{
    copy: 'Copy',
    copySuccess: {
        1: "Copied one row to clipboard",
        _: "Copied %d rows to clipboard"
    },
    copyTitle: 'Copy to clipboard',
    copyKeys: 'Press <i>ctrl</i> or <i>\u2318</i> + <i>C</i> to copy the table data<br>to your system clipboard.<br><br>To cancel, click this message or press escape.'
}

Please note that the html5 part of this button type's name is for consistency with the other HTML5 export buttons, but unlike its companion buttons it doesn't actually require HTML5 APIs. It will work for all DataTables supported browsers.

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

Examples

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

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

new DataTable('#myTable', {
	layout: {
		topStart: {
			buttons: [
				{
					extend: 'copyHtml5',
					text: 'Copy current page',
					exportOptions: {
						modifier: {
							page: 'current'
						}
					}
				}
			]
		}
	}
});

new DataTable('#myTable', {
	language: {
		buttons: {
			copyTitle: 'Data copied',
			copyKeys: 'Use your keyboard or menu to select the copy command'
		}
	},
	layout: {
		topStart: {
			buttons: ['copyHtml5']
		}
	}
});