Update A row with client side ajax implemetation

yishayh

Hi,

We are trying to achieve the same behaviour like this example:
https://editor.datatables.net/examples/inline-editing/simple.html
where an update to a cell returns from the server the updated row which is than refreshed.
The difference is that we are implementing the calls to the server using a REST API and than passing the updated row to the datatable using the
$('#XXX').DataTable().row(rowIndex).data(result);
We receive an error:
https://datatables.net/manual/tech-notes/4

A few things that we don't recieve:
1. We don't see the nice refresh row effect.
2. When we try to edit the cell again it opens for edit, but throws the a null pointer exception in the following line:
// Remove from DOM, keeping event handlers, and include text nodes in remove
var children = node.contents().detach();

Thanks,
Yishay

yishayh

We got $('#XXX').DataTable().row(rowIndex).data(result);
to work, but it goes again through the ajax attribute function that in turn refresh the entire datatable.

We also tried
$('#'+ scope.id).dataTable().fnUpdate(dt.data[scope.dtIndex], scope.dtIndex, undefined, false, false);
But in this case the edited field stayed in edit inline and than we start receiving the same error as my previous post.

allan

Hi Yishay,

Is your REST API returning the JSON data that Editor expects?

Allan

yishayh

Hi Allan,

We done the following:
1. We attached a function to the editor ajax (with the API of function (method, url, data, successCallback, errorCallback))
2. On Edit, we call the server from the javascript (Using promises).
3. When the request returns We do the following:
scope.mergeRowsData(result.aaData); // Merging the data returned from the server with local instance of the full table information.
successCallback({data:serverResponse.aaData}); // Calling the editor ajax success callback.

When We tried passing only the data of the edited line (like in the link you sent) the table refreshed to show only that row.

I need to add that we also have an ajax function on the datatable (function (data, callback, settings)).

Thanks,
Yishay

allan

Are you able to give me a link to the page in question please? I don't know of any reason why only the edited row would be the only one shown if you return JSON in the expected format.

Thanks,
Allan

yishayh

Hi Allan,

sorry, but it's not a public site, I'll be happy to schedule with you a skype/gotomeeting and show you the behavior and code.

Thanks,
Yishay

allan

Certainly - live support is available under the priority support options.

Alternatively, if you could show me the Javascript you are using and also the returns from your API I might be able to piece it together.

Allan

yishayh

Hi Allan,

sure, but We are talking about thousands code lines, could you focus me on what you want to see exactly?

In the editor ajax:
1. We have a code that take the returned information and merge it with the local UI information (from the previous calls, representing the entire table).
2. Than we call successCallback.

After this the table rerenders so we jump to the datatable ajax
There we process the data and pass it the callback from the ajax signature.

Thanks,
Yishay

allan

Let's start with the Editor initialisation (new $.fn.dataTable.Editor) and the output of:

console.log( JSON.stringify({data:serverResponse.aaData}) );

just prior to successCallback being called (which I presume is in the ajax function).

Allan

yishayh

Hi Allan,

Great focusing! thanks.
this is Editor initialisation (JSON.stringify(editorOpt)):

{
    "table": {
        "0": {},
        "context": {},
        "length": 1
    },
    "fields": [{
        "name": "name",
        "label": "Spot Prototype Name",
        "className": null,
        "fieldBind": {
            "si": null,
            "requiredForNew": true,
            "orderable": true,
            "ocn": null,
            "folder": null,
            "dataType": "FieldWrapperName",
            "columnCssClass": null,
            "cellCssClass": null,
            "visible": true,
            "required": true,
            "readonly": false,
            "ts": true,
            "label": "Spot Prototype Name",
            "apiName": "name",
            "value": null,
            "type": "REFERENCE",
            "rfotp": null,
            "rfan": null,
            "referenceObjectApiName": null,
            "recordSobjectApiName": "CC_REID__Spot_Prototype__c",
            "recordId": null,
            "fullFieldName": "name",
            "fieldType": "REFERENCE",
            "fieldNameData": "name",
            "dropdownFieldType": null,
            "dirty": null,
            "autocomplete": true,
            "allowNew": null
        },
        "requiredForNew": true
    }, {
        "name": "level_list__c",
        "label": "Level",
        "className": null,
        "fieldBind": {
            "si": null,
            "requiredForNew": true,
            "orderable": true,
            "ocn": null,
            "folder": null,
            "dataType": "FieldWrapper",
            "columnCssClass": null,
            "cellCssClass": null,
            "visible": true,
            "required": true,
            "readonly": false,
            "ts": true,
            "label": "Level",
            "apiName": "level_list__c",
            "value": null,
            "type": "STRING",
            "rfotp": null,
            "rfan": null,
            "referenceObjectApiName": null,
            "recordSobjectApiName": "CC_REID__Spot_Prototype__c",
            "recordId": null,
            "fullFieldName": "level_list__c",
            "fieldType": "STRING",
            "fieldNameData": "level_list__c",
            "dropdownFieldType": null,
            "dirty": null,
            "autocomplete": true,
            "allowNew": null
        },
        "requiredForNew": true
    }, {
        "name": "spot_type__c",
        "label": "Spot Type",
        "className": null,
        "fieldBind": {
            "si": null,
            "requiredForNew": true,
            "orderable": true,
            "ocn": "PrototypeEditViewRequest",
            "folder": null,
            "dataType": "LookupValueWrapper",
            "columnCssClass": null,
            "cellCssClass": null,
            "visible": true,
            "required": true,
            "readonly": false,
            "ts": false,
            "label": "Spot Type",
            "apiName": "spot_type__c",
            "value": null,
            "type": "Id",
            "rfotp": "a3Y",
            "rfan": null,
            "referenceObjectApiName": "CC_REID__Spot_Type__c",
            "recordSobjectApiName": "CC_REID__Spot_Prototype__c",
            "recordId": null,
            "fullFieldName": "spot_type__c",
            "fieldType": "REFERENCE",
            "fieldNameData": "spot_type__c",
            "dropdownFieldType": null,
            "dirty": null,
            "autocomplete": true,
            "allowNew": null,
            "options": [{
                "si": null,
                "requiredForNew": false,
                "orderable": false,
                "ocn": null,
                "folder": null,
                "dataType": "SelectOptionWrapper",
                "columnCssClass": null,
                "cellCssClass": null,
                "value": "a3Y20000000POZAEA4",
                "label": "Entrance",
                "isItemEscaped": false,
                "isDisabled": false
            }, {
                "si": null,
                "requiredForNew": false,
                "orderable": false,
                "ocn": null,
                "folder": null,
                "dataType": "SelectOptionWrapper",
                "columnCssClass": null,
                "cellCssClass": null,
                "value": "a3Y20000000L6pUEAS",
                "label": "0023",
                "isItemEscaped": false,
                "isDisabled": false
            }],
            "nameValue": "Entrance"
        },
        "requiredForNew": true,
        "type": "select",
        "options": [{
            "label": "Entrance",
            "value": "a3Y20000000POZAEA4"
        }, {
            "label": "0023",
            "value": "a3Y20000000L6pUEAS"
        }]
    }, {
        "name": "asset_quantity__c",
        "label": "Asset Quantity",
        "className": null,
        "fieldBind": {
            "si": null,
            "requiredForNew": false,
            "orderable": true,
            "ocn": null,
            "folder": null,
            "dataType": "FieldWrapper",
            "columnCssClass": null,
            "cellCssClass": null,
            "visible": true,
            "required": false,
            "readonly": false,
            "ts": false,
            "label": "Asset Quantity",
            "apiName": "asset_quantity__c",
            "value": null,
            "type": "DOUBLE",
            "rfotp": null,
            "rfan": null,
            "referenceObjectApiName": null,
            "recordSobjectApiName": "CC_REID__Spot_Prototype__c",
            "recordId": null,
            "fullFieldName": "asset_quantity__c",
            "fieldType": "DOUBLE",
            "fieldNameData": "asset_quantity__c",
            "dropdownFieldType": null,
            "dirty": null,
            "autocomplete": true,
            "allowNew": null
        },
        "requiredForNew": false
    }, {
        "name": "size__c",
        "label": "Size",
        "className": null,
        "fieldBind": {
            "si": null,
            "requiredForNew": true,
            "orderable": true,
            "ocn": null,
            "folder": null,
            "dataType": "FieldWrapper",
            "columnCssClass": null,
            "cellCssClass": null,
            "visible": true,
            "required": false,
            "readonly": false,
            "ts": false,
            "label": "Size",
            "apiName": "size__c",
            "value": null,
            "type": "DOUBLE",
            "rfotp": null,
            "rfan": null,
            "referenceObjectApiName": null,
            "recordSobjectApiName": "CC_REID__Spot_Prototype__c",
            "recordId": null,
            "fullFieldName": "size__c",
            "fieldType": "DOUBLE",
            "fieldNameData": "size__c",
            "dropdownFieldType": null,
            "dirty": null,
            "autocomplete": true,
            "allowNew": null
        },
        "requiredForNew": true
    }, {
        "name": "underground__c",
        "label": "Underground",
        "className": null,
        "fieldBind": {
            "si": null,
            "requiredForNew": true,
            "orderable": true,
            "ocn": null,
            "folder": null,
            "dataType": "FieldWrapper",
            ...
        },
        "requiredForNew": true,
        "type": "checkbox",
        "separator": "|",
        "options": [{
            "label": "",
            "value": true
        }]
    }, {
        "name": "status__c",
        "label": "Status",
        "className": null,
        "fieldBind": {
            "si": null,
            "requiredForNew": true,
            "orderable": true,
            "ocn": null,
            "folder": null,
            "dataType": "PicklistValueWrapper",
            "columnCssClass": null,
            "cellCssClass": null,
            "visible": true,
            "required": false,
            "readonly": false,
            "ts": false,
            "label": "Status",
            "apiName": "status__c",
            "value": null,
            "type": "String",
            "rfotp": null,
            "rfan": null,
            "referenceObjectApiName": null,
            "recordSobjectApiName": "CC_REID__Spot_Prototype__c",
            "recordId": null,
            "fullFieldName": "status__c",
            "fieldType": "PICKLIST",
            "fieldNameData": "status__c",
            "dropdownFieldType": null,
            "dirty": null,
            "autocomplete": true,
            "allowNew": null,
            "options": [{
                "active": true,
                "defaultValue": true,
                "label": "Outline",
                "validFor": null,
                "value": "Outline"
            }, {
                "active": true,
                "defaultValue": false,
                "label": "Step",
                "validFor": null,
                "value": "Step"
            }, {
                "active": true,
                "defaultValue": false,
                "label": "Quantity",
                "validFor": null,
                "value": "Quantity"
            }, {
                "active": true,
                "defaultValue": false,
                "label": "Budget",
                "validFor": null,
                "value": "Budget"
            }, {
                "active": true,
                "defaultValue": false,
                "label": "Procurement",
                "validFor": null,
                "value": "Procurement"
            }],
            "isMultipicklist": false
        },
        "requiredForNew": true,
        "type": "select",
        "options": [{
            "label": "Outline",
            "value": "Outline"
        }, {
            "label": "Step",
            "value": "Step"
        }, {
            "label": "Quantity",
            "value": "Quantity"
        }, {
            "label": "Budget",
            "value": "Budget"
        }, {
            "label": "Procurement",
            "value": "Procurement"
        }]
    }],
    "i18n": {
        "create": {
            "title": "<h3>XXXXX XXXXX XXXX</h3>"
        },
        "remove": {
            "title": "<h3>XXXXX XXXXX</h3>"
        }
    }
}

I'll have another post for the other part.
Thanks,
Yishay

yishayh

Here is the data before the successCallback

{"data":[{"requiredForNew":false,"orderable":false,"dataType":"ExtendedRemoteActionTableRowData","visualCues":[],"requestedDataByColumnId":{"id":{"requiredForNew":true,"orderable":true,"dataType":"FieldWrapper","visible":false,"required":false,"readonly":true,"ts":false,"label":"Record ID","apiName":"id","type":"ID","rsan":"Spot_Prototype__c","fullFieldName":"id","fieldType":"ID","fieldNameData":"id","autocomplete":true},"status__c":{"requiredForNew":true,"orderable":true,"dataType":"PicklistValueWrapper","visible":true,"required":false,"readonly":false,"ts":false,"label":"Status","apiName":"status__c","type":"String","rsan":"Spot_Prototype__c","fullFieldName":"status__c","fieldType":"PICKLIST","fieldNameData":"status__c","autocomplete":true,"options":[{"active":true,"defaultValue":true,"label":"Outline","value":"Outline"},{"active":true,"defaultValue":false,"label":"Step","value":"Step"},{"active":true,"defaultValue":false,"label":"Quantity","value":"Quantity"},{"active":true,"defaultValue":false,"label":"Budget","value":"Budget"},{"active":true,"defaultValue":false,"label":"Procurement","value":"Procurement"}],"isMultipicklist":false},"underground__c":{"requiredForNew":true,"orderable":true,"dataType":"FieldWrapper","visible":true,"required":false,"readonly":false,"ts":false,"label":"Underground","apiName":"underground__c","type":"BOOLEAN","rsan":"Spot_Prototype__c","fullFieldName":"underground__c","fieldType":"BOOLEAN","fieldNameData":"underground__c","autocomplete":true},"size__c":{"requiredForNew":true,"orderable":true,"dataType":"FieldWrapper","visible":true,"required":false,"readonly":false,"ts":false,"label":"Size","apiName":"size__c","type":"DOUBLE","rsan":"Spot_Prototype__c","fullFieldName":"size__c","fieldType":"DOUBLE","fieldNameData":"size__c","autocomplete":true},"asset_quantity__c":{"requiredForNew":false,"orderable":true,"dataType":"FieldWrapper","visible":true,"required":false,"readonly":false,"ts":false,"label":"Asset Quantity","apiName":"asset_quantity__c","type":"DOUBLE","rsan":"Spot_Prototype__c","fullFieldName":"asset_quantity__c","fieldType":"DOUBLE","fieldNameData":"asset_quantity__c","autocomplete":true},"spot_type__c":{"requiredForNew":true,"orderable":true,"ocn":"PrototypeEditViewRequest","dataType":"LookupValueWrapper","visible":true,"required":true,"readonly":false,"ts":false,"label":"Spot Type","apiName":"spot_type__c","type":"Id","rfotp":"a3Y","referenceObjectApiName":"Spot_Type__c","rsan":"Spot_Prototype__c","fullFieldName":"spot_type__c","fieldType":"REFERENCE","fieldNameData":"spot_type__c","autocomplete":true,"options":[{"requiredForNew":false,"orderable":false,"dataType":"SelectOptionWrapper","value":"a3Y2POZAEA4","label":"Entrance","isItemEscaped":false,"isDisabled":false},{"requiredForNew":false,"orderable":false,"dataType":"SelectOptionWrapper","value":"a3Y2L6pUEAS","label":"0023","isItemEscaped":false,"isDisabled":false}],"nameValue":"Entrance"},"level_list__c":{"requiredForNew":true,"orderable":true,"dataType":"FieldWrapper","visible":true,"required":true,"readonly":false,"ts":true,"label":"Level","apiName":"level_list__c","type":"STRING","rsan":"Spot_Prototype__c","fullFieldName":"level_list__c","fieldType":"STRING","fieldNameData":"level_list__c","autocomplete":true},"name":{"requiredForNew":true,"orderable":true,"dataType":"FieldWrapperName","visible":true,"required":true,"readonly":false,"ts":true,"label":"Spot Prototype Name","apiName":"name","type":"REFERENCE","rsan":"Spot_Prototype__c","fullFieldName":"name","fieldType":"REFERENCE","fieldNameData":"name","autocomplete":true},"dataContainer":{"requiredForNew":false,"orderable":false,"dataType":"DataContainer","visible":false,"apiName":"dataContainer","quantitiesExist":false}}},{"requiredForNew":false,"orderable":false,"dataType":"ExtendedRemoteActionTableRowData","visualCues":[],"rowId":"X","requestedDataByColumnId":{"id":{"requiredForNew":true,"orderable":true,"dataType":"FieldWrapper","visible":false,"required":false,"readonly":true,"ts":false,"label":"Record ID","apiName":"id","value":"a3e2TU8ZAAW","type":"ID","rsan":"Spot_Prototype__c","recordId":"a3e2TU8ZAAW","fullFieldName":"id","fieldType":"ID","fieldNameData":"id","autocomplete":true},"status__c":{"requiredForNew":true,"orderable":true,"dataType":"PicklistValueWrapper","visible":true,"required":false,"readonly":false,"ts":false,"label":"Status","apiName":"status__c","value":"Outline","type":"String","rsan":"Spot_Prototype__c","recordId":"a3e2TU8ZAAW","fullFieldName":"status__c","fieldType":"PICKLIST","fieldNameData":"status__c","autocomplete":true,"options":[{"active":true,"defaultValue":true,"label":"Outline","value":"Outline"},{"active":true,"defaultValue":false,"label":"Step","value":"Step"},{"active":true,"defaultValue":false,"label":"Quantity","value":"Quantity"},{"active":true,"defaultValue":false,"label":"Budget","value":"Budget"},{"active":true,"defaultValue":false,"label":"Procurement","value":"Procurement"}],"isMultipicklist":false},"underground__c":{"requiredForNew":true,"orderable":true,"dataType":"FieldWrapper","visible":true,"required":false,"readonly":false,"ts":false,"label":"Underground","apiName":"underground__c","value":false,"type":"BOOLEAN","rsan":"Spot_Prototype__c","recordId":"a3e2TU8ZAAW","fullFieldName":"underground__c","fieldType":"BOOLEAN","fieldNameData":"underground__c","autocomplete":true},"size__c":{"requiredForNew":true,"orderable":true,"dataType":"FieldWrapper","visible":true,"required":false,"readonly":false,"ts":false,"label":"Size","apiName":"size__c","type":"DOUBLE","rsan":"Spot_Prototype__c","recordId":"a3e2TU8ZAAW","fullFieldName":"size__c","fieldType":"DOUBLE","fieldNameData":"size__c","autocomplete":true},"asset_quantity__c":{"requiredForNew":false,"orderable":true,"dataType":"FieldWrapper","visible":true,"required":false,"readonly":false,"ts":false,"label":"Asset Quantity","apiName":"asset_quantity__c","value":1,"type":"DOUBLE","rsan":"Spot_Prototype__c","recordId":"a3e2TU8ZAAW","fullFieldName":"asset_quantity__c","fieldType":"DOUBLE","fieldNameData":"asset_quantity__c","autocomplete":true},"spot_type__c":{"requiredForNew":true,"orderable":true,"ocn":"PrototypeEditViewRequest","dataType":"LookupValueWrapper","visible":true,"required":true,"readonly":false,"ts":false,"label":"Spot Type","apiName":"spot_type__c","value":"a3Y2POZAEA4","type":"Id","rfotp":"a3Y","referenceObjectApiName":"Spot_Type__c","rsan":"Spot_Prototype__c","recordId":"a3e2TU8ZAAW","fullFieldName":"spot_type__c","fieldType":"REFERENCE","fieldNameData":"spot_type__c","autocomplete":true,"options":[{"requiredForNew":false,"orderable":false,"dataType":"SelectOptionWrapper","value":"a3Y2POZAEA4","label":"Entrance","isItemEscaped":false,"isDisabled":false},{"requiredForNew":false,"orderable":false,"dataType":"SelectOptionWrapper","value":"a3Y2L6pUEAS","label":"0023","isItemEscaped":false,"isDisabled":false}],"nameValue":"Entrance"},"level_list__c":{"requiredForNew":true,"orderable":true,"dataType":"FieldWrapper","visible":true,"required":true,"readonly":false,"ts":true,"label":"Level","apiName":"level_list__c","value":"1","type":"STRING","rsan":"Spot_Prototype__c","recordId":"a3e2TU8ZAAW","fullFieldName":"level_list__c","fieldType":"STRING","fieldNameData":"level_list__c","autocomplete":true},"name":{"requiredForNew":true,"orderable":true,"dataType":"FieldWrapperName","visible":true,"required":true,"readonly":false,"ts":true,"label":"Spot Prototype Name","apiName":"name","value":"XXXX 1","type":"REFERENCE","rsan":"Spot_Prototype__c","recordId":"a3e2TU8ZAAW","fullFieldName":"name","fieldType":"REFERENCE","fieldNameData":"name","autocomplete":true},"dataContainer":{"requiredForNew":false,"orderable":false,"dataType":"DataContainer","visible":false,"apiName":"dataContainer","quantitiesExist":true}}}]}

Thanks,
Yishay

allan

Thanks - I'll take a look in the morning.

yishayh

Hi Allan,

did you had the chance to take a look into this one?

Many thanks,
Yishay

allan

Could you also show me your DataTables configuration please?

The data array above appears to have two different objects in it. Did you edit two different rows? Also it appears to have a really complex data structure relative to the simple fields.name property values that you show in the Editor code above.

Are you still using row().data() or any other DataTables API method around this part of the code? Can you show me how you are using that if you are (which really shouldn't be required).

Allan

yishayh

Hi Allan,

| Could you also show me your DataTables configuration please?
We do it dynamically with:
tElement.DataTable(tableOptions);
This is the tableOptions (it couldn't be stringify, tell me if you need anything else):

aaSorting:Array[0]
length:0
ajax:(data, callback, settings)
aoColumns:Array[4]
autoWidth:false
bSort:true
buttons:Array[3]
dom:"Bfrtp"
editable:true
fixedColumns:false
hideFirstRow:true
initComplete:(settings, json)
keys:Object
columns:":not(:first-child)"
editor:Editor
language:Object
buttons:Object
pageLength:"%d"
infoEmpty:"No records found to show"
paginate:Object
sSearch:"<span>&nbsp;&nbsp;Search</span>"
pageLength:1
paging:false
pagingType:"bootstrap_full_number"
processing:false
rowReorder:Object
selector:"td.reorder"
update:false
scrollCollapse:true
scrollX:true
search:Object
input:undefined
searchDelay:350
searchable:false
searching:false
select:Object
blurable:true
selector:"td:first-child"
style:"single"
serverSide:true

Did you edit two different rows?

No, only one.

Are you still using row().data() or any other DataTables API method around this part of the code?

No.

Can you show me how you are using that if you are (which really shouldn't be required).

// This function takes the information from the server and manipulate it to the structure used by the datatable.

            fixResponseCoding(result);

// This function takes the partial information from the server (only the edited row) and embed it with the rest of the information shown in the table.

            scope.mergeRowsData(result.aaData);
            successCallback({data:serverResponse.aaData});

Thanks,
Yishay

Edited by Allan - Formatting. Details on how to format posts using markdown can be found in this guide.

allan

If only a single row was edited, could you clarify why the server is returning two items in the data array?

Also there isn't an ajax option in your Editor configuration. Was that missed from the above, or are you not specifying one? Editor currently does require that.

Allan

yishayh

Hi Allan,

this is not the data from the server.
The server returns only one row, but me merge it with the save information from the full ajax call and we send the merged result to the success callback.
If we send only the returned row to the callback the datatable refreshes to show only one row.

Thanks,
Yishay

allan

It sounds like the merge might be shallow then. That would explain where there are two elements in the data array rather than one. I would expect there to be only one when only a single row is updated. Could you confirm if this is the case.

If there is any way of giving me a link to the page that would really help speed things up so I can see the code and debug it live, rather than guessing at what options and methods might be getting used.

Allan

yishayh

Hi Allan,

Maybe we can open a user for you to connect the system with and send you a link, but I can't do it in the forum, can you send me an email?

Thanks,
Yishay

allan

If you could drop me a PM, which you can do by clicking my name above and then the "Send message" button, that would be great.

Thanks,
Allan

allan

In the PM (thanks) the link you gave shows a table with a single row. When I change the "Asset Prototype" value it updates and it appears to correctly show the updated data.

Could you give me details on how to recreate this error?

Thanks,
Allan

yishayh

Hi Allan,

again thank you for your continues help on this issue.
I added a row to the table so you can see the phenomenon.
The code currently rerender the entire table when the ajax returned the updated row (because calling the successCallback with only the returned row rerender the table to show only one row).
Look in the code for:
scope.mergeRowsData(result.aaData);
this is where you want to break and instead of using
successCallback({data:serverResponse.aaData});
you can send
successCallback({data:result.aaData});
Than you will see the table refreshing to show only one row.

Thanks,
Yishay

allan

If I use successCallback({data:result.aaData}); then the following is shown on the console:

DataTables warning: table id=dt1 - Requested unknown parameter 'dataContainer' for row 0. For more information about this error, please see http://datatables.net/tn/4

Which is correct, the object in the aaData array does not contain a dataContainer parameter.

I don't fully understand the mergeRowsData function - but it looks like it is adding items to the array, not just merging the single row that was edited.

Additionally it appears to be modifying serverResponse rather than result, hence why the data is missing from the result.aaData array.

Finally I don't actually see it doing a merge - it is just adding indexes to the row. In jQuery we would use $.extend() to merge objects together. There is probably something similar in Angular, but I'm afraid I don't know what it is.

I think in summary, the data array that is being passed into the callback function does not currently contain the data required to display the modified row.

Allan

yishayh

Hi Allan,

the merge was done because we didn't understand why sending the response to the success callback didn't refreshed only the updated row, bu the entire datatable instead.
Do we need to add a dataContainer to our aaData, will that solve the issue?
If so, where should this attribute reside in the response structure?

Many thanks,
Yishay

yishayh

Hi Allan,

did you had the chance to think about this?

Thanks,
Yishay

allan

It would only refresh the full table if server-side processing was enabled. I'm afraid I can't recall at the moment if your table does have server-side processing enabled or not?

To resolve the issue you need to pass the callback function an object which as a data property, which in turn contains the object with data for each row that was edited.

Allan

yishayh

Hi Allan,

I'm not sure what we changed, but now it works
I just changed:
scope.mergeRowsData(result.aaData);
successCallback({data:serverResponse.aaData});
To this:
//scope.mergeRowsData(result.aaData);
successCallback({data:result.aaData});
And it works, the weird thing here, is that I already tried that before We started the conversation, I'm not sure what else We changed that helped

Anyhow, many thanks for your help,
Yishay

allan

Super - great to hear that it is working :-)

Allan

yishayh

Hi Allan,

It was too early to celebrate, we were successful in calling successCallback (pun intended ), but still we still get a full refresh of the table

Can you help us in understanding why it doesn't work?

We are using the following code in the ajax parameter for the case of one line update:

var dt = {
                draw: data.draw, //we need to pass the draw every call,
                recordsTotal: serverResponse.recordsTotal, //total records without filtering
                recordsFiltered: serverResponse.recordsFiltered// total record after filter [BUG] yishay need to return 11
              };
              tableOptions.search = {value:data.search.value}

              dt.data = processResponse(serverResponse.aaData);
              //hide the table loader

              callback(dt);

But the entire table is rerendered.

Thanks,
Yishay

allan

By the "entire table", do you mean that all rows in the tbody are updated? If so, that is expected in a server-side processing draw (which it looks like the above is). Calling callback in ajax will tell DataTables "here is the data I want you to render - render it!".

Allan

yishayh

Hi Allan,

be passed only the wanted row to the function why was the entire datatable rerendered?
In this example is the entire datatable rerendered in each update?

Thanks for quick responses,
Yishay