[Editor] Not sure how to send data to the server
[Editor] Not sure how to send data to the server
I'm sure I'm missing something obvious here, but I don't understand how to send data from the editor back to the server? I looked on the forums and the docs but this still seems very unclear. I did see one forum post where the ajax
property was set to a function(like I am now using) but not only does it seem to not actually send the xhr request, I also don't understand how to pass method, url, callback, etc. to the ajax function. Any help would be greatly appreciated.
var BaseTableDatatables = function() {
// Init full DataTable, for more examples you can check out https://www.datatables.net/
var initDataTableFull = function() {
editor = new $.fn.dataTable.Editor( {
ajax: function ( method, url, d, successCallback, errorCallback ) {
var output = { data: [] };
successCallback(output);
}
,table: "#tbl-guests-list"
,idSrc: 'id'
,fields: [
{
label: "Prefix:",
name: "prefix"
}
,{
label: "First name:",
name: "firstName"
}
,{
label: "Last name:",
name: "lastName"
}
,{
label: "Activity:",
name: "activity"
}
]
,formOptions: {
bubble: {
title: 'Edit',
buttons: true
}
,submit: 'allIfChanged'
}
} );
$('#tbl-guests-list').on( 'click', 'tbody td:not(:first-child)', function (e) {
editor.edit(
this
,"Editing Guest"
,[
{ label: 'Save', fn: function () { this.submit(); } }
,{ label: 'Cancel', fn: function () { this.close(); } }
]
);
} );
jQuery('.js-dataTable-full').dataTable({
dom: 'Bfrtip'
,ajax: {
"url": "/url-to-ajax/"
,"contentType": "application/json"
,"type": "POST"
,"data": function ( d ) {
return JSON.stringify( d );
}
,"dataSrc": function ( json ) {
return json['result']['guests'];
}
}
,columns: [
{
data: null,
defaultContent: '',
className: 'select-checkbox',
orderable: false
},
{ data: "prefix" },
{ data: "firstName" },
{ data: "lastName" },
{ data: "activity" }
]
,columnDefs: [ { orderable: false, targets: [ 4 ] } ]
,pageLength: 10
,lengthMenu: [[5, 10, 15, 20], [5, 10, 15, 20]]
,select: {
style: 'os',
selector: 'td:first-child'
}
,buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
});
};
This question has an accepted answers - jump to answer
Answers
Hi,
Typically you would just set the
ajax
option to be a URL (string) to tell Editor where to send the data. The data submitted is sent using the format documented here.Typically you would only use the
ajax
option as a function if you don't want to use Ajax! For example usinglocalStorage
as the data source, rather than submitting it to the server.Regards,
Allan
Oh awesome, I was making it way too complex. It works perfectly with just a URL, not sure how I missed that. Thanks for clearing that up!