Do I have to call draw in postSubmit?

LordTonix

My REST API does not return data in the way DT wants it. So I had to edit the data in postSubmit. Do I have to call draw after that? This is not in the docs for postSubmit even though the docs explicitly mention modifying data recieved back from the response.

colin

Hi @LordTonix ,

This earlier thread here should help you - it's discussing the same issue.

Cheers,

Colin

LordTonix

@colin

I changed my table to use a submitComplete, and my UI will still not update without an explicit call to draw. This is what I am doing:

            editor.on('submitComplete', function (e, json, data, action) {

                // DataTable's expects the json object to look a specific way.
                // For example, it wants a "data" key with an array of objects.
                // Our API only send's back the object itself.
                if (action === "create" || action === "edit") {
                    json = {
                        "data": [
                            json
                        ]
                    }
                    //table.draw(); // <------ Table UI will NOT update without this!
                }

            });

allan

Hi,

The postSubmit event is actually the correct place to perform any manipulation on the data returned from the server before Editor processes it.

As long as the data is in the correct format that Editor expects (which it looks like it probably will be from your second post), then there shouldn't be any need to call draw() as Editor will do that itself once it has updated any rows that were edited.

From your original post, were you just seeking confirmation of that, or is there actually a problem with it?

Regards,
Allan

LordTonix

@allan There is actually a problem. Without table.draw() the new row never appears in my table. If I perform any searching, sorting, filtering, paging, or deleting (operations that seem to trigger a draw) then the new row will appear.

I am using the following supporting libraries:

• https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js
• https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js
• Local Download of DT: JSZip 2.5.0, pdfmake 0.1.32, DataTables 1.10.16, Editor 1.7.3, AutoFill 2.2.2, Buttons 1.5.1, Column visibility 1.5.1, Flash export 1.5.1, HTML5 export 1.5.1, Print view 1.5.1, ColReorder 1.4.1, FixedColumns 3.2.4, FixedHeader 3.1.3, KeyTable 2.3.2, Responsive 2.2.1, RowGroup 1.0.2, RowReorder 1.2.3, Scroller 1.4.4, Select 1.2.5

My code is identical to above except I changed submitComplete to postSubmit. I tried to build out a Plunkr but since DataTables editor must be downloaded locally, it would not allow me to upload such large files.

allan

That suggests that the JSON data modification is getting back to Editor and looking again at the data above I see why. The original json object isn't being modified - rather the local variable json is.

This should do the trick:

editor.on('postSubmit', function (e, json, data, action) {
   var copy = $.extend( true, {}, json );

    // DataTable's expects the json object to look a specific way.
    // For example, it wants a "data" key with an array of objects.
    // Our API only send's back the object itself.
    if (action === "create" || action === "edit") {
       json.data = [ copy ];
    }
});

Note how now the json variable isn't changed, but rather its properties are. That should allow it to work correctly (assuming that the data loaded from the server is a JSON data structure that matches that used by the row in the table).

Allan