{hero}

data

Since: DataTables 1.10

Data to use as the display data for the table.

Description

DataTables can obtain the data it is to display in the table's body from a number of sources, including being passed in as an array of row data using this initialisation parameter. As with other dynamic data sources, arrays or objects can be used for the data source for each row, with columns.data employed to read from specific object properties.

Using this initialisation option can be useful when creating a table from a Javascript data source, or from a custom Ajax data get.

Note that if data is specified, the data given in the array will replace any information that was found in the table's DOM when initialised.

Type

This option can be given in the following type(s):

Examples

Using a 2D array data source:

new DataTable('#myTable', {
	data: [
		[
			'Tiger Nixon',
			'System Architect',
			'$3,120',
			'2011/04/25',
			'Edinburgh',
			5421
		],
		['Garrett Winters', 'Director', '$8,422', '2011/07/25', 'Edinburgh', 8422]
		// ...
	]
});

Using an array of objects as a data source:

new DataTable('#myTable', {
	data: [
		{
			name: 'Tiger Nixon',
			position: 'System Architect',
			salary: '$3,120',
			start_date: '2011/04/25',
			office: 'Edinburgh',
			extn: 5421
		},
		{
			name: 'Garrett Winters',
			position: 'Director',
			salary: '5300',
			start_date: '2011/07/25',
			office: 'Edinburgh',
			extn: '8422'
		}
		// ...
	],
	columns: [
		{ data: 'name' },
		{ data: 'position' },
		{ data: 'office' },
		{ data: 'extn' },
		{ data: 'start_date' },
		{ data: 'salary' }
	]
});

Related

The following options are directly related and may also be useful in your application development.