How to map and get Object ID when doing edit?

MikeLMC

Hello,

I have the below use case:

const editor = new $.fn.dataTable.Editor({
    ajax: {
        create: {
            type: 'POST',
            url:  'http://localhost:8080/api/v1/myEndpoint',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json'
        },
        edit: {
            type: 'PUT',
            url:  'http://localhost:8080/api/v1/myEndpoint',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json'
        },
        remove: {
            type: 'DELETE',
            url:  'http://localhost:8080/api/v1/myEndpoint',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json'
        }
    },
    table: '#myTable',
    idSrc: "rowId",
    fields: [
        {label: "Name", name: "name"},
        {label: "Step", name: "step"},
        {label: "Page Attribute", name: "pageAttribute"},
        {label: "Page Object", name: "pageObject"},
        {label: "Action", name: "action"},
        {label: "Value", name: "value"}
    ]
});

// Activate an inline edit on click of a table cell
$('#myTable').on( 'click', 'tbody td:not(:first-child)', function (e) {
    editor.inline( this, {
        buttons: { label: '>', fn: function () { this.submit(); } }
    } );
} );

$('#myTable').DataTable({
    ajax: 'http://localhost:8080/api/v1/myEndpoint/3',
    dom: 'Bfrtip',
    order: [[ 2, 'asc' ]],
    columns: [
        // {
        //     data: null,
        //     defaultContent: '',
        //     className: 'select-checkbox',
        //     orderable: false
        // },
        {data: "name"},
        {data: "step"},
        {data: "pageAttribute"},
        {data: "pageObject"},
        {data: "action"},
        {data: "value"}
    ],
    select: {
        style:    'os',
        selector: 'td:first-child'
    },
    buttons: [
        {extend: "create", editor: editor},
        {extend: "edit", editor: editor},
        {extend: "remove", editor: editor}
    ]
});

On the back-end, I have a simple entity:

public class MyEntity {

    private String  rowId;
    private String  objectId;
    private String  name;
    private String  step;
    private String  pageAttribute;
    private String  pageObject;
    private String  action;
    private String  value;

}

This is wrapped in another object, so when calling my endpoint, I get the below as an example:

{
    "data": [
        {
            "rowId": "1",
            "objectId": "3",
            "name": "A",
            "step": "1",
            "pageAttribute": "B",
            "pageObject": "C",
            "action": "D",
            "value": "E"
        },
        ...
    ]
}

My table gets populated and data is shown as it's extracted from the above example.

If I edit a row and press submit, I get the request body in the back-end like so (example, when I edit a cell belonging to pageAttribute column):

data[4][pageAttribute]=Edited value&action=edit

Problem is, I need that ObjectID Attribute to be able to map it in the back-end. In the above example, my specific objectID is 3 as shown above.

How can I make DataTables to include this field per row when doing Edit so that I know which entity to change in the back-end?

kthorngren

The Editor Client Server exchange docs state this about the data object:

On edit, the parameter keys reflect the primary key values for the row(s) being edited (specified by idSrc). The inner object still reflects the values of the form, as entered by the user.

Try changing your idSrc to objectId. You might want to use the Datatables option rowId and set it to objectId so the match.

Kevin

MikeLMC

That does return it though both values are different.

{
    "data": [
        {
            "rowId": "1",
            "objectId": "3",
            "name": "A",
            "step": "1",
            "pageAttribute": "B",
            "pageObject": "C",
            "action": "D",
            "value": "E"
        },
        {
            "rowId": "2",
            "objectId": "3",
            ...
        },
        {
            "rowId": "3",
            "objectId": "3",
            ...
        },
        ...
    ]
}

Essentially, the rowId should be good to let me know which element from the above list has been edited. The objectId is the one telling me which entity does the whole list under "data" belong to.

If I change that property to objectId, then I lose the rowId. I'd then know which entity this belongs to, but not which element of the list.

Basically, I require both rowId and objectId.

kthorngren

In the past I've used fields.type as hidden to submit the field but not have it in the Editor form.

Kevin