Complex table headers - selected header rows

As with its companion example, this example shows Buttons's multi-row header and footer handling, but in this case shows how to limited the export to a specific row, rather than including all rows in the header / footer in the export. This can be useful if you have a row in the header for search input elements that wouldn't be relevant in the exported data, as is shown here.

To have only one row in the header's output, we use the customizeData callback function of the exportOptions for each button (see buttons.exportData() for the full list of options available for the export options) to manipulate the data to be exported - in this case removing a row from the header. This function is shared between all buttons used on this page to help with code readability and reduce size.

Name	Position	Office	Extn.	Start date	Salary

Name	Position	Office	Extn.	Start date	Salary

Javascript
HTML
CSS
Ajax
Server-side script
Comments

The Javascript shown below is used to initialise the table shown in this example:

var exportOptions = {
	customizeData: function (data) {
		// Remove the second header row by popping it off the array
		data.headerStructure.pop();
		console.log(data);
	}
};

$('#example').DataTable({
	ajax: '../../../../examples/ajax/data/objects.txt',
	columns: [
		{ data: 'name' },
		{ data: 'position' },
		{ data: 'office' },
		{ data: 'extn' },
		{ data: 'start_date' },
		{ data: 'salary' }
	],
	layout: {
		topStart: {
			buttons: [
				{ extend: 'copyHtml5', exportOptions: exportOptions },
				{ extend: 'excelHtml5', exportOptions: exportOptions },
				{ extend: 'pdfHtml5', exportOptions: exportOptions }
			]
		}
	},
	initComplete: function () {
		this.api()
			.columns()
			.every(function () {
				// Get the input element from the second header row
				var input = $('input', this.header(1));
				var column = this;

				// Event listener for user input
				input.on('keyup', function () {
					if (column.search() !== input.val()) {
						column.search(input.val()).draw();
					}
				});
			});
	}
});

let exportOptions = {
	customizeData: function (data) {
		// Remove the second header row by popping it off the array
		data.headerStructure.pop();
		console.log(data);
	}
};

new DataTable('#example', {
	ajax: '../../../../examples/ajax/data/objects.txt',
	columns: [
		{ data: 'name' },
		{ data: 'position' },
		{ data: 'office' },
		{ data: 'extn' },
		{ data: 'start_date' },
		{ data: 'salary' }
	],
	layout: {
		topStart: {
			buttons: [
				{ extend: 'copyHtml5', exportOptions: exportOptions },
				{ extend: 'excelHtml5', exportOptions: exportOptions },
				{ extend: 'pdfHtml5', exportOptions: exportOptions }
			]
		}
	},
	initComplete: function () {
		this.api()
			.columns()
			.every(function () {
				// Get the input element from the second header row
				let input = this.header(1).querySelector('input');
				let column = this;

				// Event listener for user input
				input.addEventListener('keyup', () => {
					if (column.search() !== input.value) {
						column.search(input.value).draw();
					}
				});
			});
	}
});

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

thead input {
		width: 100%;
		padding: 3px;
		box-sizing: border-box;
	}

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.

Complex table headers - selected header rows

Other examples

Basic initialisation

HTML 5 data export

Column visibility

Print

API

Split buttons

Styling

DataTables