columns.editField

Since: Editor 1.4

Define which field a column should trigger editing on.
Please note - this property requires the Editor extension for DataTables.

Description

The Editor inline() and bubble() methods trigger individual field editing based on certain elements on the page (typically table cells) and will attempt to determine what field in the Editor form should be the one that is edited based on the given table cell.

However, automatic detection isn't always possible, particularly when working with joined database tables where it is quite common to display a label value in the DataTable display column, but edit a related value (a database id column for example) when editing the row's data.

This option provides the ability to tell Editor what field(s) should be edited when a particular column is activated for editing using inline() and bubble().

The values this option can take are defined by the field names that are used for the Editor form (fields.name). Any field name defined in the Editor instance can be used as a value here.

As of Editor 1.5, for bubble() editing this option can be an array of field names to allow multiple fields to be shown for editing at a time.

Type

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

string or array

Default

Value: null

Editor will attempt to determine the field to be edited based on the DataTables' initialisation options automatically. A warning will be given if this is not possible and the columns.editField option is not specified.

Example

Inline editing for a table using the editField option for the last column - note that the data displayed in the table is sites.name while the value edited is users.site:

$(document).ready(function () {
	var editor = new DataTable.Editor({
		ajax: '../php/join.php',
		table: '#example',
		fields: [
			{
				label: 'First name:',
				name: 'users.first_name'
			},
			{
				label: 'Last name:',
				name: 'users.last_name'
			},
			{
				label: 'Phone #:',
				name: 'users.phone'
			},
			{
				label: 'Site:',
				name: 'users.site',
				type: 'select'
			}
		]
	});

	// Activate an inline edit on click of a table cell
	$('#example').on('click', 'tbody td', function (e) {
		editor.inline(this);
	});

	new DataTable('#myTable', {
		ajax: {
			url: '../php/join.php',
			type: 'POST'
		},
		columns: [
			{ data: 'users.first_name' },
			{ data: 'users.last_name' },
			{ data: 'users.phone' },
			{ data: 'sites.name', editField: 'users.site' }
		]
	});
});