Ajax data source - Popup editing

This example is a modification of the in table icon trigger example. In this case, instead of using a modal to display the editing actions, an Editor instance on a different web-page is used. In fact, note that there is no Editor instance created on this page at all!

Instead, we create a popover window and use inter-window communication to tell the Editor instance in the other window what action we want to take and what row to take it on. Alternatively, you could link to a specific URL that triggers editing on a specific item (i.e. REST).

The intention of this example is to demonstrate the standalone editing actions that Editor can perform - in the popover window it will operate on a given row, without needing the DataTable, instead it will fetch the data and submit it to the server as needed.

This type of editing can be particularly useful if you want to display an editing form to a user, e.g. for their account information. You don't need the full table, just edit a specific row (making sure you use a WHERE condition in such a use case!). Complex forms that take a lot of room can also benefit from this type of display, rather than being constrained to a modal.

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:

const table = new DataTable('#example', {
	ajax: '../php/staff.php',
	columns: [
		{
			data: null,
			render: (data) => data.first_name + ' ' + data.last_name
		},
		{ data: 'position' },
		{ data: 'office' },
		{ data: 'extn' },
		{ data: 'start_date' },
		{ data: 'salary', render: DataTable.render.number(null, null, 0, '$') },
		{
			data: null,
			className: 'dt-center editor-edit',
			defaultContent: '<button><i class="fa fa-pencil"/></button>',
			orderable: false
		},
		{
			data: null,
			className: 'dt-center editor-delete',
			defaultContent: '<button><i class="fa fa-trash"/></button>',
			orderable: false
		}
	],
	layout: {
		topStart: {
			buttons: [
				{
					text: 'Create new record',
					action: function () {
						// Create new record
						popover('create', null, 'Create new record');
					}
				}
			]
		}
	}
});

// Edit record by opening a new window and triggering editing
table.on('click', 'td.editor-edit button', function (e) {
	let id = e.target.closest('tr').id;
	let data = table.row('#' + id).data();

	popover('edit', id, `Edit record for ${data.first_name} ${data.last_name}`);
});

// Delete a record - Use a modal
table.on('click', 'td.editor-delete button', function (e) {
	let id = e.target.closest('tr').id;
	let data = table.row('#' + id).data();

	popover('remove', id, `Delete record for ${data.first_name} ${data.last_name}`);
});

/**
 * Trigger a popover window which will contain an Editor instance
 *
 * @param action The action to take
 * @param id The row id to take the action on (null for create)
 * @param title Form title to show
 */
function popover(action, id, title) {
	let popup = window.open('./edit.html');

	// Listen for the popup being ready
	popup.addEventListener(
		'load',
		() => {
			// Then send it a message with just the id. If you needed to send
			// multiple messages, you could use JSON here.
			popup.postMessage({
				action,
				id,
				title
			});
		},
		true
	);

	// Want to listen for a message coming back to say that the edit is done
	window.addEventListener(
		'message',
		(e) => {
			// Close the popup
			popup.close();

			// And reload the table
			table.ajax.reload(null, false);
		},
		{ once: 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:

td.editor-edit button,
td.editor-delete button {
	background: transparent;
	border: none;
	color: inherit;
	cursor: pointer;
}

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.

Ajax data source - Popup editing

Other examples

Simple initialisation

Advanced initialisation

Triggering editing

DataTables as an input

Dates and time

Dropdown input types

DataTables extensions

Inline editing

Bubble editing

API

Standalone

Styling

Plug-ins