How to modify Datatables Editor submit format

bitshark

Hello,

I bought Editor and it's really been well worth the money. The documentation is stellar. I do have the following question:

• Is it possible to modify the JSON submission format of Editor ? For example, it seems to always put data beneath the top-level "data" attribute, but I'd rather it put it directly in the request. Take for example the following AJAX call following an inline row update configured to submit with "allIfChanged" ...

Request URL:http://XXXX/tags/hosts/9933242
Request Method:POST
Content-Type:application/json
Request Payload: {"data":{"9933242":{"key":"availability-zone","val":"us-east-1c"}}}

I want to be able to re-use the API's that I'm building out for Datatables as generic REST endpoints. So I'd like to remove the "data" subsection for form CRUD operations , as normal practices at my office is to not use an enclosing attribute. So I'd like the AJAX POST to look more like this...

Request URL:http://XXXX/tags/hosts/9933242
Request Method:POST
Content-Type:application/json
Request Payload: {"9933242":{"key":"availability-zone","val":"us-east-1c"}}

Is this possible, and how would I go about doing it? The dataSrc option? Ajax dataFilter? Could you point me to an example? Thanks, and keep up the great work.

Sincerely,
Alex

P.S Here is the initializer for my editor object if you need that...

    dt_tags_editor = new $.fn.dataTable.Editor({
        dom: "Bfrtip",
        ajax: {
            /* url: "/api/tags/_id_/crud",
             contentType: 'application/json',*/

            create: {
                type: 'POST',
                url:  '/api/placeholder',
                contentType: 'application/json',
                data: function ( d ) {
                    return JSON.stringify( d );
                },
            },
            edit: {
                type: 'POST',
                url:  '/tags/hosts/_id_',
                contentType: 'application/json',
                data: function ( d ) {
                    return JSON.stringify( d );
                },
                traditional: true,
                dataSrc: ''
            },
            remove: {
                type: 'DELETE',
                url:  '/api/placeholder',
                contentType: 'application/json',
                data: function ( d ) {
                    return JSON.stringify( d );
                },
            },
        },
        table: "#datatable-tags",
        responsive: "true",
        idSrc: 'id',
        fields: [
            {
                label: "key",
                name: "key",
                type: "text"
            },
            {
                label: "val",
                name: "val",
                type: 'text'
            }
        ],


    });

bitshark

Okay, I was able to figure this out actually, I found another thread with a similar question.

Here was my solution , specifically under "edit"...

    dt_tags_editor = new $.fn.dataTable.Editor({
        dom: "Bfrtip",
        ajax: {
            /* url: "/api/tags/_id_/crud",
             contentType: 'application/json',*/

            create: {
                type: 'POST',
                url:  '/api/placeholder',
                contentType: 'application/json',
                data: function ( d ) {
                    return JSON.stringify( d );
                },
            },
            edit: {
                type: 'POST',
                url:  '/tags/hosts/_id_',
                contentType: 'application/json',
                data: function ( d ) {
                    var tmp = d['data'];
                    d = tmp;
                    return JSON.stringify( d );
                },
            },

allan

Good to hear you got it working. ajax.data is a good way of doing this as you have found. The other option is to use the preSubmit event, in which you can modify the data submitted to the server as well.

Allan