Editor Refresh Table After Add / Edit

borrisl

When deleting a row the table refreshes as expected, but when adding or editing a row it does not refresh the table data?

// Populates the user table with request/response data from server
    users = $('#userTable').DataTable({
        pageLength: 25,
        responsive: true,
        dom: '<"html5buttons"B>lTfgitp',
        select: {
            style: 'single'
        },
        ajax: {
            url: "/users/get_users",
            method: 'POST',
            data: {
                action: 'request'
            }
        },
        columnDefs: [
            {
                searchable: false,
                orderable: false,
                targets: [0]
            },
            {
                searchable: false,
                orderable: false,
                targets: [5]
            },
            {
                orderable: false,
                visible: false,
                searchable: false,
                targets: [1, 4]
            }
        ],
        order: [[2, 'asc']],
        columns: [
            {data: null, width: "10%"},
            {data: 'id'},
            {
                data: null,
                render: function(data, type, row){
                    var name = data.first_name + ' ' + data.last_name;
                    /* This adds the key next to users who have administrative privileges */
                    if(data.is_admin === true){
                        return "<i class='fa fa-fw fa-key' style='color:#333'></i> " + name;
                    } else {
                        return name;
                    }
                }
            },
            {data: 'email'},
            {data: 'is_admin'},
            {
                data: null, className: 'dt-body-center',
                defaultContent: "<button type='button' class='btn btn-primary' data-toggle='modal' " +
                "data-target='#keysModal'>Keys</button>"
            }
        ],
        buttons: [
            {
                extend: "create",
                text: "<i class='fa fa-plus text-success'></i> Add User",
                editor: user_editor
            },
            {
                extend: "edit",
                text: "<i class='fa fa-pencil-square-o text-info'></i> Edit User",
                editor: user_editor
            },
            {
                extend: "remove",
                text: "<i class='fa fa-trash-o text-danger'></i> Delete User",
                editor: user_editor
            }
        ]
    });

And the editor is configured as the following:

    // Edit functions for the users table
    user_editor = new $.fn.dataTable.Editor( {
        table: "#userTable",
        idSrc: 'id',
        ajax: {
            dataType: 'json',
            contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
            create: {
                type: 'POST',
                url: '/users/new_users'
            },
            edit: {
                type: 'POST',
                url:  '/users/edit_users'
            },
            remove: {
                type: 'POST',
                url:  '/users/delete_users'
            }
        },
        fields: [
            { name: 'id', type: "hidden" },
            { label: "First Name:", name: "first_name", type: "text",
                attr: {
                    maxlength: 25,
                    placeholder: 'First name'
                }
            },
            { label: "Last Name:", name: "last_name", type: "text",
                attr: {
                    maxlength: 25,
                    placeholder: 'Last name'
                }
            },
            { label: "Email:", name: "email", type: "text",
                attr: {
                    maxlength: 50,
                    placeholder: 'email@mydomain.com'
                }
            },
            { label: "", name: "is_admin", type: "checkbox", separator: ";",
                options: [{
                    label: 'Administrator', value: 1 }],
                unselectedValue: 0
            },
            { label: "Password", name: "password", type: "password" },
            { label: "Repeat Password", name: "password2", type: "password" }
        ],
        formOptions: {
            main: {
                focus: 'first_name'
            }
        }
    } );

Since I'm new to javascript, please be gentle.

I've tried adding a <datatables>.ajax.reload() in various places such as the success: function( data, result) { ... here } in the ajax call but just ended up not being able to display the json returned from the call.

kthorngren

I would start be reviewing the Editor Client / Server Data documentation to verify your server scripts are returning the expected responses.

Kevin

allan

Yup, my guess is that they aren't returning the data parameter with the data for the newly created / edited rows.

Allan

borrisl

Ah... ok. You might be correct. I'm only returning the following after a successful edit:

return jsonify({'success': 'Updated records'})

I'll review the Client / Server Data docs and go from there. Thanks.

allan

That would do it yes. Editor expects the data for the created or edited row to be returned from the server. That allows any server modified values to be shown (e.g. updated time, updated by, etc).

Allan