Leave modal open after adding record

Loren Maxwell

When creating a record, I'd like to have two buttons:
1) The traditional button that saves the new record and closes the editing modal
2) An additional button that saves the new record but refreshes the editing modal to be able to immediately add another record

1) is easy, but I'm not quite sure what action to call for 2).

Any thoughts?

rf1234

var reopen = false;

yourEditor
    .on('open', function(e, mode, action) {  
        if ( action === 'create') {
            yourEditor.buttons( [
                {
                    text: 'Create & Again',
                    className: 'btn-success',
                    action: function () {
                        this.submit();
                        reopen = true;
                    }
                },
                {
                    text: 'Create & Close',
                    className: 'btn-primary',
                    action: function () {
                        this.submit();
                        reopen = false;
                    }
                }
            ] );
        }
    })
    .on( 'submitSuccess', function ( e, json, data, action ) {
        if ( action === 'create' && reopen ) {
            yourEditor.create( {
                focus: 0
            } )
        }
    })

This submits and reopens the form depending on the button clicked. I use bootstrap hence the bootstrap classes for the button colors. You can replace this with your own CSS.

Loren Maxwell

Thanks, rf1234.

I was thinking the solution would be under the formButtons options.

Something similar to the cancel button from this example:
https://editor.datatables.net/examples/api/cancelButton

Here's the solution I ended up with (notice the 'Submit and add another' button):

var editor; // use a global for the submit and return data rendering in the examples
 
$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: "../php/staff.php",
        table: "#example",
        fields: [ {
                label: "First name:",
                name: "first_name"
            }, {
                label: "Last name:",
                name: "last_name"
            }, {
                label: "Position:",
                name: "position"
            }, {
                label: "Office:",
                name: "office"
            }, {
                label: "Extension:",
                name: "extn"
            }, {
                label: "Start date:",
                name: "start_date"
            }, {
                label: "Salary:",
                name: "salary"
            }
        ]
    } );
 
    var table = $('#example').DataTable( {
        dom: "Bfrtip",
        ajax: "../php/staff.php",
        columns: [
            { data: null, render: function ( data, type, row ) {
                // Combine the first and last names into a single table field
                return data.first_name+' '+data.last_name;
            } },
            { data: "position" },
            { data: "office" },
            { data: "extn" },
            { data: "start_date" },
            { data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
        ],
        select: true,
        buttons: [
            {
                extend: "create",
                editor: editor,
                formButtons: [
                    'Create',
                    { text: 'Cancel', action: function () { this.close(); } },
                    { text: 'Submit and add another', action: function () { this.submit(); this.create({focus:0}); } }
                ]
            },
            {
                extend: "edit",
                editor: editor,
                formButtons: [
                    'Edit',
                    { text: 'Cancel', action: function () { this.close(); } }
                ]
            },
            {
                extend: "remove",
                editor: editor,
                formButtons: [
                    'Delete',
                    { text: 'Cancel', action: function () { this.close(); } }
                ]
            }
        ]
    } );
} );