I'm trying to create/add editor fields during the "createdRow" callback on the DataTable, because the rows contain information about the field to be edited (e.g., label, type, name). My setup is a little different in that I have a table where the first column is the label, and the second column displays the value (which has a listener on it for editing)
Here is an example of JSON being returned:
{"data":[{"id":10277022,"field":"code","type":"text","label":"Code","value":"AE1"},{"id":10277022,"field":"content","type":"textarea","label":"Content","value":"Adverse events1"}]}
Editor Initialization
detailsEditor = new $.fn.dataTable.Editor( {
ajax: {
create: 'blank.jsp?_response=true&_action=newFootnote',
remove: 'blank.jsp?_response=true&_action=deleteFootnote',
},
table: "#details",
idSrc: "id"
} );
DataTables Initialization:
details = $('#details').DataTable( {
paging: false,
lengthChange: false,
info: false,
searching: false,
ordering: false,
rowId: "field",
ajax: 'blank.jsp?_response=true&_action=loadDetails&id=' + $("#details").attr('data-footnote-id'),
columns: [
{ data: "label" },
{ data: "value" }
],
createdRow: function ( row, data, index ) {
var field = { name: data.field, data: data.value };
detailsEditor.add(field);
}
} );
Listener:
$('#details').on( 'click', 'tbody td:nth-child(2)', function (e) {
detailsEditor.inline( this, {
buttons: { label: '<i class="fas fa-check-circle"></i>', className: 'btn-primary', fn: function () { this.submit(); } }
} );
} );
I keep getting the following error:
Unable to automatically determine field from source. Please specify the field name.
I feel I'm close, but missing something. Any ideas?
