DOM sourced table

Although many of the Editor examples show the data for the table being loaded by Ajax (ajax) this is by no means mandatory. Editor will work with any data source that DataTables can use, with the only additional requirement that each row has a unique ID (allowing the server to identify which rows to update, delete, etc).

This example shows Editor being applied to a plain HTML table (generated from the database, although it could come from absolutely anywhere). Ajax requests are still used for create, edit and remove actions, but not for loading the initial data.

First name	Last name	Position	Office	Salary
Tiger	Nixon	System Architect	Edinburgh	320800
Garrett	Winters	Accountant	Tokyo	170750
Ashton	Cox	Junior Technical Author	San Francisco	86000
Cedric	Kelly	Senior Javascript Developer	Edinburgh	433060
Airi	Satou	Accountant	Tokyo	162700
Brielle	Williamson	Integration Specialist	New York	372000
Herrod	Chandler	Sales Assistant	San Francisco	137500
Rhona	Davidson	Integration Specialist	Tokyo	327900
Colleen	Hurst	Javascript Developer	San Francisco	205500
Sonya	Frost	Software Engineer	Edinburgh	103600
Jena	Gaines	Office Manager	London	90560
Quinn	Flynn	Support Lead	Edinburgh	342000
Charde	Marshall	Regional Director	San Francisco	470600
Haley	Kennedy	Senior Marketing Designer	London	313500
Tatyana	Fitzpatrick	Regional Director	London	385750
Michael	Silva	Marketing Designer	London	198500
Paul	Byrd	Chief Financial Officer (CFO)	New York	725000
Gloria	Little	Systems Administrator	New York	237500
Bradley	Greer	Software Engineer	London	132000
Dai	Rios	Personnel Lead	Edinburgh	217500
Jenette	Caldwell	Development Lead	New York	345000
Yuri	Berry	Chief Marketing Officer (CMO)	New York	675000
Caesar	Vance	Pre-Sales Support	New York	106450
Doris	Wilder	Sales Assistant	Sydney	85600
Angelica	Ramos	Chief Executive Officer (CEO)	London	1200000
Gavin	Joyce	Developer	Edinburgh	92575
Jennifer	Chang	Regional Director	Singapore	357650
Brenden	Wagner	Software Engineer	San Francisco	206850
Fiona	Green	Chief Operating Officer (COO)	San Francisco	850000
Shou	Itou	Regional Marketing	Tokyo	163000
Michelle	House	Integration Specialist	Sydney	95400
Suki	Burks	Developer	London	114500
Prescott	Bartlett	Technical Author	London	145000
Gavin	Cortez	Team Leader	San Francisco	235500
Martena	Mccray	Post-Sales support	Edinburgh	324050
Unity	Butler	Marketing Designer	San Francisco	85675
Howard	Hatfield	Office Manager	San Francisco	164500
Hope	Fuentes	Secretary	San Francisco	109850
Vivian	Harrell	Financial Controller	San Francisco	452500
Timothy	Mooney	Office Manager	London	136200
Jackson	Bradshaw	Director	New York	645750
Olivia	Liang	Support Engineer	Singapore	234500
Bruno	Nash	Software Engineer	London	163500
Sakura	Yamamoto	Support Engineer	Tokyo	139575
Thor	Walton	Developer	New York	98540
Finn	Camacho	Support Engineer	San Francisco	87500
Serge	Baldwin	Data Coordinator	Singapore	138575
Zenaida	Frank	Software Engineer	New York	125250
Zorita	Serrano	Software Engineer	San Francisco	115000
Jennifer	Acosta	Junior Javascript Developer	Edinburgh	75650
Cara	Stevens	Sales Assistant	New York	145600
Hermione	Butler	Regional Director	London	356250
Lael	Greer	Systems Administrator	London	103500
Jonas	Alexander	Developer	San Francisco	86500
Shad	Decker	Regional Director	Edinburgh	183000
Michael	Bruce	Javascript Developer	Singapore	183000
Donna	Snider	Customer Support	New York	112000

Javascript
HTML
CSS
Ajax
Server-side script
Comments

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

var editor = new DataTable.Editor({
	ajax: '../php/staff-html.php',
	fields: [
		{
			label: 'First name:',
			name: 'first_name'
		},
		{
			label: 'Last name:',
			name: 'last_name'
		},
		{
			label: 'Position:',
			name: 'position'
		},
		{
			label: 'Office:',
			name: 'office'
		},
		{
			label: 'Salary:',
			name: 'salary'
		}
	],
	table: '#example'
});

$('#example').DataTable({
	columns: [
		{ data: 'first_name' },
		{ data: 'last_name' },
		{ data: 'position' },
		{ data: 'office' },
		{ data: 'salary', render: DataTable.render.number(null, null, 0, '$') }
	],
	layout: {
		topStart: {
			buttons: [
				{ extend: 'create', editor: editor },
				{ extend: 'edit', editor: editor },
				{ extend: 'remove', editor: editor }
			]
		}
	},
	select: true
});

const editor = new DataTable.Editor({
	ajax: '../php/staff-html.php',
	fields: [
		{
			label: 'First name:',
			name: 'first_name'
		},
		{
			label: 'Last name:',
			name: 'last_name'
		},
		{
			label: 'Position:',
			name: 'position'
		},
		{
			label: 'Office:',
			name: 'office'
		},
		{
			label: 'Salary:',
			name: 'salary'
		}
	],
	table: '#example'
});

new DataTable('#example', {
	columns: [
		{ data: 'first_name' },
		{ data: 'last_name' },
		{ data: 'position' },
		{ data: 'office' },
		{ data: 'salary', render: DataTable.render.number(null, null, 0, '$') }
	],
	layout: {
		topStart: {
			buttons: [
				{ extend: 'create', editor: editor },
				{ extend: 'edit', editor: editor },
				{ extend: 'remove', editor: editor }
			]
		}
	},
	select: true
});

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:

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 interaction for this demo is shown below. This server uses PHP, so the PHP script is shown, however our download packages include the equivalent script for other platforms, including .NET and Node.js. Server-side scripts can be written in any language, using the protocol described in the Editor documentation.

DOM sourced table

Other examples

Simple initialisation

Advanced initialisation

DataTables as an input

Dates and time

DataTables extensions

Inline editing

Bubble editing

API

Standalone

Styling

Plug-ins

DataTables