How do I save edited tables?
How do I save edited tables?
chris_r
Posts: 6Questions: 2Answers: 0
I need to capture the saved data from a datatable edit. I'm setting the data source to a JSON file rather than using AJAX call. A couple questions: 1) is a row edit submitted as a "save" or is there another save on the whole table? and 2) how do I capture the saved data from #1?
Here is my editor code?
$(document).ready(function () {
var dataSource = <%= DataTableJson %>;
console.log(dataSource);
editor = new $.fn.dataTable.Editor({
data: dataSource.data,
idSrc: "triggers.TriggerId",
table: '#ProtocolTriggerTable',
fields: [{
name: "triggers.ComparisonOperatorID", //item ai-ii
type: "select",
options: dataSource.options["triggers.ComparisonOperatorID"],
label: "If [Answer]"
}, {
name: "triggers.AnswerValue1", //item aiii-iv
type: "select",
options: dataSource.options["triggers.AnswerValue1"]
}, {
name: "triggers.AnswerValue2", //item av-vi
label: "And"
}, {
name: "triggers.TriggerActionDefinitionID", //item bi-ii
type: "select",
options: dataSource.options["triggers.TriggerActionDefinitionID"],
label: "Then"
}, {
name: "triggers.TriggeredKeyID1", //item ci
type: "select",
options: dataSource.options["triggers.TriggeredKeyID1"]
}, {
name: "triggers.TriggerHelpText",
type: "textarea",
width: "100%",
label: "With Pop-Up Text"
}, {
name: "triggers.Answer",
type: "textarea",
width: "100%",
label: "With Pop-Up Text"
}]
});
// New record
$('#newRow').on('click', function () {
editor.inlineCreate('end');
});
// Edit record
$('#ProtocolTriggerTable').on('click', 'td.editor-edit', function (e) {
e.preventDefault();
editor.edit($(this).closest('tr'), {
title: 'Edit A Protocol',
buttons: 'Submit',
});
});
// Delete a record
$('#ProtocolTriggerTable').on('click', 'td.editor-delete', function (e) {
editor.remove($(this).closest('tr'), {
title: 'Delete record',
message: 'Are you sure you wish to remove this record?',
buttons: 'Delete'
});
});
//this is the table template
var protocolTriggerTable = $('#ProtocolTriggerTable').DataTable({
dom: "Bfrtip",
data: dataSource.data,
columns: [
{
data: null,
defaultContent: '<i class="fa fa-pencil"/>',
className: "dt-center editor-edit",
orderable: false
},
{
data: null,
defaultContent: '<i class="fa fa-trash"/>',
className: "dt-center row-remove",
orderable: false
},
{ data: "operators.CoDisplayText", className: "dt-center" },
{ data: "triggers.AnswerValue1" },
{ data: "triggers.TriggerText" },
{ data: "triggers.AnswerValue2" },
{ data: "actions.TaDescription" },
{ data: "protocols.protocolText" },
{ data: "triggers.TriggerHelpText" }
]
});
});
function mySubmit() {
console.log("mysubmit:" + dataSource);
}
This question has an accepted answers - jump to answer
Answers
So I found the article https://editor.datatables.net/examples/advanced/deepObjects.html which shows what data is submitted to the server. I assume its the server code I'm missing but I can't translate PHP to C#.
And I've been reading this: https://editor.datatables.net/manual/server#Client-to-server
I can tell what is being sent but neither tell me how to get the data object. since I don't control the form submit I'm really fuzzy on how to get the data.
The Editor doesn't have a
dataoption. I think you will need to useajaxas a function and in the function update the JSON data source. Looks like this thread has an example using localstorage.Kevin
ugh. Ok thanks!
If you don't want Editor to make an Ajax submission, then you can leave off the
ajaxoption and it will do local table editing. The upshot is that you would be able to listen for events such aspostEditand get the data that was changed and send it to the server (or just send the whole table's data if you want to rewrite the entire JSON file - which might be easier in this case?).Am I right in assuming you are updating a JSON file at the server-side? Might you have multiple concurrent users? If so, you would need to do row by row updates.
Allan