Question about process of server data

yu yen kan · March 2017

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 · March 2017

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 · March 2017

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 · March 2017

full row? even that data is just readonly?

allan · March 2017

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 · March 2017

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 · March 2017

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 · March 2017

yes I did set it also for editor

kthorngren · March 2017

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 · March 2017

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 · March 2017

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 · March 2017

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 · March 2017

yes, finally it works, thanks a lot

Question about process of server data

Question about process of server data

Replies

Howdy, Stranger!

Categories

DataTables

Question about process of server data

Question about process of server data

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables