Refresh data after edit / create?

calittle

Hi, I'm trying to get my dataTable to update to show the results of editing a row, or adding a new row. Seems I can't get the table to redraw/reload data after the Editor window is closed. I've tried messing with the Events API on the editor, but it doesn't seem to fire. Here's my debug.

HTML

<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-users">
                                <thead>
                                    <tr>
                                        <th>Name (Last, First)</th>
                                        <th>Gender</th>
                                        <th>Phone</th>
                                        <th>Status</th>
                                        <th>Type</th>
                                        <th>Membership Type</th>
                                        <th>Record</th>
                                    </tr>
                                </thead>
                                <tbody>                                   
                                </tbody>
                            </table>

JS

var editor;
        var table;
        $(document).ready(function() {
            /*
            'list/users/{org}/{site}',
            'list/user/{user}',
            'list/users/{org}',
            */
            editor = new $.fn.dataTable.Editor({
                    //url: '/easy/easy-api/api/v1/list/users/1',
                ajax: {
                    create: {
                        type: 'POST',
                        url:  '/easy/easy-api/api/v1/create/user',
                        data: function(data){
                            return(data);
                        }
                    },
                    edit: {
                        type: 'POST',                       
                        url:  '/easy/easy-api/api/v1/edit/user/_id_',
                        data: function(data){
                            return(data);
                        }
                    },
                    remove: {
                        type: 'DELETE',
                        url:  '/easy/easy-api/api/v1/delete/user/_id_',
                        data: function(data){return {}}
                    }
                },
                idSrc: 'id',
                table: '#dataTables-users',
                fields: [
                    {label:'Organization ID', name:'org'},
                    {label:'Site ID', name:'site'},
                    {label:'Cred. UID', name:'credentialuid'},
                    {label:'PIN', name:'pin'},
                    {label:'Birthdate', name:'birthdate', type:  'datetime',def:   function () { return new Date(); }},
                    {label:'Perm Access Grant', name:'permaccessgranted'},
                    {label:'Perm Access Deny', name:'permaccessdenied'},
                    {label:'Notes', name:'notes'},
                    {label:'Last Name', name:'lastname'},
                    {label:'First Name', name:'firstname'},
                    {label:'Gender', name:'gender'},
                    {label:'Phone Number', name:'phone'},
                    {label:'Member Status', name:'memberstatus'},
                    {label:'Member Type', name:'membertype'},
                    {label:'Membership Type', name:'membershiptype'}
                ]
            });
            
            // New record
            $('a.editor_create').on('click', function (e) {
                    e.preventDefault(); 
                    editor.create({title: 'Create new record',buttons: 'Add'});
            } );
    
            // Edit record
            $('#dataTables-users').on('click', 'a.editor_edit', function (e) {
                    e.preventDefault();
    
                    editor.edit( $(this).closest('tr'), {
                            title: 'Edit record',
                            buttons: 'Update'
                    } );
            } );
    
            // Delete a record
            $('#dataTables-users').on('click', 'a.editor_remove', function (e) {
                    e.preventDefault();
    
                    editor.remove( $(this).closest('tr'), {
                            title: 'Delete record',
                            message: 'Are you sure you wish to remove this record?',
                            buttons: 'Delete'
                    } );
            } );            
            table = $('#dataTables-users').DataTable( {
                dom: "Bfrtip",
                responsive: 'true',
                deferRender: 'true',
                ajax: {
                    url: '/easy/easy-api/api/v1/list/users/1',
                    dataSrc: ''
                },
                columns: [                  
                    {data: null,
                        render: function ( data, type, row ) {
                            return data.lastname+', '+data.firstname;
                        },
                        editField: ['lastname', 'firstname']
                    }
                    ,{ data: 'gender'}
                    ,{ data: 'phone'}
                    ,{ data: 'memberstatus'}
                    ,{ data: 'membertype'}
                    ,{ data: 'membershiptype'}
                    ,{
                        orderable: false,
                        data: null,
                        className: "center",
                        defaultContent: '<a href="" class="editor_edit btn btn-warning btn-xs">Edit</a> <a href="" class="editor_remove btn btn-danger btn-xs ">Delete</a>'
                    }

                ],
                order: [ 1, 'asc' ],
                select: {
                    style:    'os',
                    selector: 'td:first-child'
                }
            }); 
            $('#dataTables-users').on( 'click', 'tbody td', function (e) {
                editor.bubble( this );
            } );
            editor.on( 'create', function ( e, json, data ) {
                alert( 'New row added' );
            } );                                
        });

calittle

Well, never mind. I was trying the 'submit' event, but it wasn't firing for some reason. The 'close' event fires and that will work for now.