Editor - DELETE is updating table, POST and PATCH is not, no errors in console

paweltrela

Hello, i am making Datatables Editor implementation for client, and have a problem..

When i create new table record, this record is added to the database successfully, but my table is not refreshing.
I have the same thing when i try to edit my record, i need to refresh page or click the refresh button i've created.

When i delete record it is done, and my table is refreshing, i dont see this record anymore.

How can i force my table to be refreshed after i add or edit my record?

URL: https://crmclone.herokuapp.com/ (click me button is refreshing the table)

My code:

    <script type="text/javascript">

        var editor; 
 
        $(document).ready(function() {

            editor = new $.fn.dataTable.Editor( {
                idSrc:  'id',
                ajax: {
                    cache: true,
                    create: {
                        type: "POST",
                        url: "/api/tasks"
                    },
                    edit: {
                        type: "PATCH",
                        url: "/api/tasks/_id_"
                    },
                    remove: {
                        type: "DELETE",
                        url: "/api/tasks/_id_"
                    }
                },
                table: "#example",
                fields: [ 
                    {
                        label: "First name:",
                        name: "name"
                    }, {
                        label: "Last name:",
                        name: "surname"
                    }, {
                        label: "Country:",
                        name: "country"
                    }
                ]
            } );
         
            $('#example').DataTable( {
                dom: "Bfrtip",
                ajax: {
                    cache: true,
                    "url": "/api/tasks",
                    "dataSrc": ""
                },
                columnDefs: [
                {
                    targets: '_all',
                    defaultContent: " "
                }],
                columns: [
                    { data: "name", sortable: false },
                    { data: "surname" },
                    { data: "country", sortable: false }
                ],
                select: true,
                buttons: [
                    { extend: "create", editor: editor },
                    { extend: "edit",   editor: editor },
                    { extend: "remove", editor: editor }
                ],
                paging: false,
            } );
        } );

    </script>

colin

The reason is the response back from the server is incorrect. Currently, whatever happens, whether it be a create or a delete, the server is sending back the full data set. As you can tell from this page, that's not the expected format - if you look at the "Ajax data" tab beneath the table, you can see the expected responses.

Colin

paweltrela

@colin thank you for your help,
i've created a structure of data response and it works now

This is how the json data should look like:

{"data":[{"id":"41","name":"moj","surname":"test123","country":"sdv","created_at":"2020-03-11T13:28:17.282Z","updated_at":"2020-03-12T09:01:21.005Z"}]}