Question about process of server data

yu yen kan

I am using editor with ajax that return json data
{"error":null,"data":{"0":{"item":"1"}},"fieldErrors":[],"cancelled":[]}
after it edited, the datatable is not update the item value,
do I need to create a event for after submit to update and refresh the table data myself?

kthorngren

The problem might be that you are returning error and cancel objects in addition to the data. It could be the Editor is interpreting these as errors, even though they are blank, and not updating the table.

Is item the only field in the row? I believe you need to return the full row.

Details are outlined here:
https://editor.datatables.net/manual/server

Kevin

allan

I think Kevin is spot on here. Your data parameter should be an array of objects, not an object of objects.

Allan

yu yen kan

full row? even that data is just readonly?

allan

That is correct. The server needs to respond with the full data for the row, as the manual page Kevin linked to states.

Allan

yu yen kan

this is my table

var orderTable = $('#orderTable').DataTable({
        dom: "Bfrtip",
        rowId: "id",
        ajax: "url",
        columns: [{
                "className": 'details-control',
                "orderable": false,
                "data": null,
                "defaultContent": ''
            }, {
                data: 'id',
                title: "Order code"
            }, {
                data: 'user',
                title: "User/Company name",
                defaultContent: "No assigned",
                render: "name"
            }, {
                data: 'delivery_address',
                title: "Delivery Address",
                defaultContent: "No selected",
                render: "name"
            }, {
                data: 'payment',
                title: "Total Amount (Remaining)",
                defaultContent: "-",
                render: function (data, type, full, meta) {
                    if (data !== null || data !== '' || data !== undefined) {
                        return parseFloat(data.total).toFixed(2) + " (" + parseFloat(data.remaining).toFixed(2) + ")";
                    }
                }
            }, {
                data: 'order_date',
                title: "Order Date",
                defaultContent: "No generated"
            }, {
                data: 'order_status',
                title: "Order Status",
                render: "name"
            }, {
                data: 'remark',
                title: "Remark"
            }],
        select: true,
        buttons: [{
                extend: "create",
                editor: orderEditor
            }, {
                extend: "edit",
                editor: orderEditor
            }, {
                extend: "remove",
                editor: orderEditor
            }]
    });

this is data from ajax

{
    "data": [{
        "id": 29,
        "remark": "",
        "order_date": "2017 March 28 20:26",
        "user": {
            "id": 1,
            "name": "yu yen kan",
            "contact": [{
                "id": 1,
                "contact_number": "1"
            }, {
                "id": 2,
                "contact_number": "2"
            }]
        },
        "order_status": {
            "id": 0,
            "name": "Pending for payment"
        },
        "delivery_address": {
            "id": 1,
            "name": "3"
        },
        "payment": {
            "total": "15.00",
            "paid": "0.00",
            "remaining": "15.00"
        }
    }]
}

this is response from edit

{
    "data": {
        "id": 4,
        "delivery_address": {
            "id": 1,
            "name": "3"
        },
        "order_status": {
            "id": 0,
            "name": "Pending for payment"
        },
        "order_date": "2017 March 15 00:00",
        "user": {
            "id": 1,
            "name": "yu yen kan",
            "contact": [{
                "id": 1,
                "contact_number": "1"
            }, {
                "id": 2,
                "contact_number": "2"
            }]
        },
        "remark": "",
        "payment": {
            "total": "15.00",
            "paid": "12.00",
            "remaining": "3.00"
        }
    }
}

When I edit row, the row will gone, is that because of "className": 'details-control' column problem? if so, how can I do it?

kthorngren

Looks like you set the rowId in the table to id. Did you set the idSrc to id in the Editor config?

https://editor.datatables.net/reference/option/idSrc

Kevin

yu yen kan

yes I did set it also for editor

kthorngren

Is the ajax data?

{
    "data": [{
        "id": 29,

The row you edited?

{
    "data": {
        "id": 4,

If so the IDs are different.

Do you get any console messages on the browser?

Kevin

allan

Yes - what Kevin says. And in addition to that:

this is response from edit

Its almost right, but not quite. data should be an array.

Allan

yu yen kan

If I update it with this

{
    "4": {
        "user": {
            "id": 1,
            "name": "yu yen kan",
            "contact": [{
                "id": 1,
                "contact_number": "1"
            }, {
                "id": 2,
                "contact_number": "2"
            }]
        },
        "delivery_address": {
            "id": 1,
            "name": "3"
        },
        "payment": {
            "total": "15.00",
            "paid": "10.00",
            "remaining": "5.00"
        },
        "order_date": "2017 March 15 00:00",
        "order_status": {
            "id": 0,
            "name": "Pending for payment"
        },
        "remark": "",
        "id": 4
    }
}

the row remain, but unchanged

or this

{
    "data": {
        "4": {
            "user": {
                "id": 1,
                "name": "yu yen kan",
                "contact": [{
                    "id": 1,
                    "contact_number": "1"
                }, {
                    "id": 2,
                    "contact_number": "2"
                }]
            },
            "delivery_address": {
                "id": 1,
                "name": "3"
            },
            "payment": {
                "total": "15.00",
                "paid": "12.00",
                "remaining": "3.00"
            },
            "order_date": "2017 March 15 00:00",
            "order_status": {
                "id": 0,
                "name": "Pending for payment"
            },
            "remark": "",
            "id": 4
        }
    }
}

the row is missing again

kthorngren

What Allan meant was that your return should be in an array []. It should look like your data in the initial ajax response, for example:

{
    "data": [{
        "id": 4,
        .....
     }]
}

Its an array with one element.

Kevin

yu yen kan

yes, finally it works, thanks a lot