Editor Refresh Table After Add / Edit

Editor Refresh Table After Add / Edit

borrislborrisl Posts: 7Questions: 3Answers: 1
edited April 2017 in Free community support

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.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 21,260Questions: 26Answers: 4,934

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

    Kevin

  • allanallan Posts: 63,356Questions: 1Answers: 10,447 Site admin

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

    Allan

  • borrislborrisl Posts: 7Questions: 3Answers: 1

    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.

  • allanallan Posts: 63,356Questions: 1Answers: 10,447 Site admin
    Answer ✓

    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

This discussion has been closed.