Inline editing retain modified value

tcdstrategies

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'
  });
});

});

kthorngren

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

tcdstrategies

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.

tcdstrategies

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.

kthorngren

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.

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.

which is in sAjaxSource

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 like bServerSide which 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

kthorngren

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

tcdstrategies

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.

allan

Can you show us the JSON that is being returned from the server in response to the edit Ajax request please?

Allan