Styling for Editor execute buttons when using in-table form controls and Bootstrap 4?

ckryanco

Greetings.

I'm setting up an Editor that uses both the standard New/Edit/Delete buttons at the top of the table, and also in-table form controls -- with the Bootstrap 4 styling.

The buttons at the top of the table work perfectly, launching an Editor that has execute buttons at the bottom of the modal page with proper Bootstrap classes ("btn btn-primary" and "btn btn-danger"). That means proper Bootstrap buttons are displayed.

The Editors launched by the in-table form controls, however, have execute buttons at the bottom of the modal with classes of just "btn" -- which results in unstyled buttons in Bootstrap, though they function properly.

This is using the exact code on the page at https://editor.datatables.net/examples/simple/inTableControls.html

    // Edit record
    $('#example').on('click', 'a.editor_edit', function (e) {
        e.preventDefault();
 
        editor.edit( $(this).closest('tr'), {
            title: 'Edit record',
            buttons: 'Update'
        } );
    } );
 
    // Delete a record
    $('#example').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'
        } );
    } );

If I modify that code to add a label and className to the "buttons" line, it does create a button with the correct Bootstrap class -- but the Editor form won't submit. Clicking on the button does nothing, and no JavaScript errors are logged.

Here are my modifications:

    // Edit record
    $('#example').on('click', 'a.editor_edit', function (e) {
        e.preventDefault();
 
        editor.edit( $(this).closest('tr'), {
            title: 'Edit This Record',
            buttons: [{label: 'Edit', className: "btn-primary"}]
        } );
    } );
    
 
    // Delete a record
    $('#example').on('click', 'a.editor_remove', function (e) {
        e.preventDefault();
 
        editor.remove( $(this).closest('tr'), {
            title: 'Delete This Record',
            message: 'Are you sure you wish to remove this record?',
            buttons: [{label: 'Delete', className: "btn-danger"}]
        } );
    } );    

I've experimented with adding extend: "create", extend: "remove", and editor: editor, to the "buttons: " lines, but this has no effect.

How can I add the Bootstrap classes to the execute buttons and still have the Editor form submit properly?

Many thanks!

rf1234

This is from my own coding. The only major difference seems to be that you don't have "fn: function() { this.submit(); }" in your code. I would give that a try. And you can use the language defaults to reuse the regular title and label names. Just replace "i18n.create" with "i18n.edit" or "i18n.remove" if I recall it correctly.

editor
    .title($.fn.dataTable.Editor.defaults.i18n.create.title)
    .buttons({
        label: $.fn.dataTable.Editor.defaults.i18n.create.submit,
        className: 'btn-showall-color',
        fn: function () {
            this.submit();
        }
    })
    .create({focus: 1})

ckryanco

That was it. Needed the submit function you specified.

Here's the applied code that works perfectly now:

    // Edit record
    $('#example').on('click', 'a.editor_edit', function (e) {
        e.preventDefault();
 
        editor.edit( $(this).closest('tr'), {
            title: 'Edit This Record',
            buttons: [{label: 'Edit', className: "btn-primary", fn: function () {this.submit();}}]
        } );
    } );
    
 
    // Delete a record
    $('#example').on('click', 'a.editor_remove', function (e) {
        e.preventDefault();
 
        editor.remove( $(this).closest('tr'), {
            title: 'Delete This Record',
            message: 'Are you sure you wish to remove this record?',
            buttons: [{label: 'Delete', className: "btn-danger", fn: function () {this.submit();}}]
        } );
    } );

Thanks, rf1234 -- You rock.