Inline editing retain modified value
Inline editing retain modified value
tcdstrategies
Posts: 4Questions: 1Answers: 0
This should be a relatively simple case but I've spent hours trying to get this to work. I am able to implement inline editing, the ajax makes the correct call and updates the value in the database; I don't want to perform a full table refresh after submitting the changes, just retain the value in the cell I modified. I've tried everything and I can't just get the modified value in the cell to stick without doing a full refresh. Any help would be appreciated.
$("table[role='datatable-qc-tox-results']").each(function (e) {
var dataTable = $(this).DataTable(
{
columns: [
{ data: 'class' },
{ data: 'panel_type' },
{ data: 'name' },
{ data: 'prev_result' },
{ data: 'result' },
{ data: 'rr_result' },
{ data: 'expected_status' },
{ data: 'ordered' },
{ data: 'report' }
],
dom: 'frtlip',
bProcessing: true,
bServerSide: true,
bLengthChange: true,
pageLength: 500,
bInfo: true,
language: {
search: "",
searchPlaceholder: "Search...",
processing: "<i class='fa fa-spinner fa-spin fa-2x'></i>"
},
"aoColumnDefs": [
{'bSortable': false, 'aTargets': ["no-sort"]}
],
"createdRow": function( row, data, dataIndex ) {
if ( data[5]) {
$(row).addClass('report');
};
},
"lengthMenu": [[10, 25, 50, 100, 500, 1000], [10, 25, 50, 100, 500, 1000]],
sAjaxSource: $(this).data('source')
});
var editor = new $.fn.dataTable.Editor({
ajax: '/result/datatable_update', // URL to server-side script
table: "table[role='datatable-qc-tox-results']", // Table ID
idSrc: 'id',
fields: [
{ name: 'result' },
{ name: 'rr_result' }
]
});
dataTable.on('click', 'tbody td', function (e) {
editor.inline(this, {
onBlur: 'submit'
});
});
});
Answers
Take a look at this example with inline editing and server side processing.. It works without performing a full table refresh. Use the browser's network inspector and you will see two Ajax requests when editing. The first is for the edit itself and the second, due to using server side processing, is for the
draw()that happens to apply sorting, searching and paging of the updated data to the table.The first response corresponds to the Editor's expected response per the Client / server data docs. The second is necessary to update the table display based on the updated row data. The update could cause the row to be displayed on a different page or different row.
Do you see something different in your page?
Kevin
Yeah it's weird, I see the ajax call to update the data (/result/datatable_update) which works fine but then just the same call to load the table as it does initially which is in sAjaxSource: $(this).data('source'); in even more weirdness the call is made to that, all the data comes back but then the table doesn't load, just sticks on the spinner.
It looks like I have bigger issue i didn't realize, the table although the ajax is bringing the data back isn't loading after sorting, reloaded or anything.
look at the browser's console for errors. If all the data is being returned then it sounds like you aren't using a server script that supports Datatables server side paging protocol to return only the rows on the page.
This is a legacy option from the Datatables 1.9 days - way old. It is recommended to use the current option which is
ajax. Also you are using legacy options likebServerSidewhich is supported with 1.10 but not sure about the new 2.0 coming out soon. Use the 1.9 to 1.10 conversion guide to map the old to the current options.If you are able to disable server side processing then the extra request won't be sent to the server, only the edit request.
Kevin
When you say all the records are returned do you mean 500 records for the page length or more records than the page length?
Kevin
I got it, i had switched from the legacy sAjaxSource to ajax and was inadvertently setting Draw to a static value; I'm all good now thanks for the help.
Can you show us the JSON that is being returned from the server in response to the edit Ajax request please?
Allan