Send more data to server than what is displayed when sending "update" request

seb-ksl

Hi everyone,

And many thanks to the devs for the high-quality work on Datatables and Editor, we definitely enjoy using it at our company .

I have a problem I seem to be unable to solve after hours of researching the documentation and trial&error.

Description

I have a Datatable and Editor instance communicating with a REST API. For a given column, the data sent by the server (when Datatables GETs the data) is nested (something like [{"id": 1, "title": "Foo"}]). I use the title attribute of the nested object to fill the column of my Datatables Editor.

When editing a cell from this "special" column, the data sent to the server to UPDATE the row sends only the title information about my nested object. This is kind of expected but is not enough for my REST API to deduce what it has to do. I would like to send the id along with it.

Example

• JS script:

// Editor instantiation
let editor = new $.fn.dataTable.Editor({
    ajax: {
        create: {
            type: "POST",
            url: "/album",
            data: function (d) {
                return JSON.stringify(d)
            }
        },
        edit: {
            type: "PATCH",
            url: "/album/_id_",
            data: function (d) {
                return JSON.stringify(d)
            }
        },
        remove: {
            type: "DELETE",
            url: "/album/_id_",
            data: function (d) {
                return {}
            }
        }
    },
    fields: [
        {name: "name", label: "Name"},
        {name: "genre", label: "Genre"},
        {name: "rating", label: "Rating"},
        {name: "tracks.0.title", label: "Title of first track"}
    ],
    idSrc: "id",
    table: "#dt"
});

// Datatables instantiation
let dt = $("#dt").DataTable({
    ajax: {
        type: "GET",
        url: "/album"
    },
    buttons: [
        {extend: "create", editor: editor},
        {extend: "edit", editor: editor},
        {extend: "remove", editor: editor}
    ],
    columns: [
        {
            data: null,
            defaultContent: "",
            className: "select-checkbox",
            orderable: false,
            name: "select",
            verboseName: ""
        },
        {
            data: "name",
            defaultContent: "",
            name: "name",
            verboseName: "Name"
        },
        {
            data: "genre",
            defaultContent: "",
            name: "genre",
            verboseName: "Genre"
        },
        {
            data: "rating",
            defaultContent: "",
            name: "rating",
            verboseName: "Rating"
        },
        {
            data: "tracks.0.title",
            defaultContent: "",
            name: "tracks.0.title",
            verboseName: "Title of first track"
        },
    ],
    dom: "Bfrtip",
    keys: {
        columns: ":not(:first-child)",
        editor: editor
    },
    order: [[1, "asc"]],
    select: {
        style: "os",
        selector: "td:first-child",
        blurable: true
    },
    serverSide: true
});

• REST API answer to Datatables' GET request:

{
    "recordsFiltered": 1,
    "recordsTotal": 1,
    "draw": 1,
    "data": [
        {
            "id": 1,
            "name": "The Black Album",
            "genre": "Metal",
            "rating": 5,
            "tracks": [
                {
                    "id": 1,
                    "title": "Enter Sandma"
                },
                {
                    "id": 2,
                    "title": "Sad But True"
                },
                {
                    "id": 3,
                    "title": "Holier Than Thou"
                },
                {
                    "id": 4,
                    "title": "The Unforgiven"
                },
                {
                    "id": 5,
                    "title": "Wherever I May Roam"
                },
                {
                    "id": 6,
                    "title": "Don't Tread on Me"
                },
                {
                    "id": 7,
                    "title": "Through the Never"
                },
                {
                    "id": 8,
                    "title": "Nothing Else Matters"
                },
                {
                    "id": 9,
                    "title": "Of Wolf and Man"
                },
                {
                    "id": 10,
                    "title": "The God That Failed"
                },
                {
                    "id": 11,
                    "title": "My Friend of Misery"
                },
                {
                    "id": 12,
                    "title": "The Struggle Within"
                }
            ]
        }
    ]
}

• Actual UPDATE request sent by Editor when editing first track's title:

{
    "action": "edit",
    "data": {
        1: {
            "tracks": {
                0: {
                    "title": "Enter Sandman"
                }
            }
        }
    }
}

• Desired UPDATE request sent by Editor when editing first track's title:

{
    "action": "edit",
    "data": {
        1: {
            "tracks": {
                0: {
                    "id": "1"
                    "title": "Enter Sandman"
                }
            }
        }
    }
}

allan

Hi,

Unfortunately the built in types for Editor don't really handle array nested data very well in this regard. It would be possible to do with a custom field type plug-in, but I would suggest using parent child editing like in this post. Rather than using an Ajax call to get the data you could just get the data for the child table from the host row. But that's going to be the best way to do nested array entry editing.

Allan