Modal Button Defaults

mrsearing-all

I want to change the default button style shown in the modals when using Editor, such as in the image below taken from the website:

So far, I have successfully changed the text of the buttons above the DataTable itself:

    $.extend(true, $.fn.dataTable.Editor.defaults, {
    i18n: {
        create: {
            button: '<i class="fa-duotone fa-solid fa-circle-plus me-2"></i>New',
            submit: '<i class="fa-duotone fa-solid fa-arrow-down-to-bracket me-2"></i>Submit'
        },
        edit: {
            button: '<i class="fa-duotone fa-solid fa-pen-to-square me-2"></i>Edit',
            submit: '<i class="fa-duotone fa-solid fa-arrow-down-to-bracket me-2"></i>Save'
        },
        remove: {
            button: '<i class="fa-duotone fa-solid fa-circle-minus me-2"></i>Delete',
            submit: '<i class="fa-duotone fa-solid fa-circle-minus me-2"></i>Delete'
        }
    }
});

And rather horrendously, the style of those buttons:

$.extend(true, $.fn.dataTable.defaults, {
    preDrawCallback: function (settings) {
        // Modify button classes
        $('.dt-buttons button').each(function () {
            let buttonText = $(this).text().trim();

            if (buttonText.includes('New')) {
                $(this).removeClass('btn-secondary').addClass('btn-falcon-primary');
            }
            if (buttonText.includes('Edit')) {
                $(this).removeClass('btn-secondary').addClass('btn-falcon-info');
            }
            if (buttonText.includes('Delete')) {
                $(this).removeClass('btn-secondary').addClass('btn-falcon-danger');
            }
        });
    }
});

How can I more efficiently change the classes of the DataTable buttons, globally, and change the classes of the Editor modal buttons?

allan

Are you using Buttons to trigger the modal (e.g. create, edit, etc)?

If so, you could do:

{
  extend: 'create',
  editor: editor,
  formButtons: {
    action: function () { this.submit(); },
    text: editor.i18n(null, 'create.submit'), // or put your FA icon HTML here
    className: 'btn btn-falcon-primary'
  }
}

Alternatively, you could override the defaults:

$.extend(true, DataTable.ext.buttons, {
    create: {
        formButtons: {
            className: 'btn-falcon-primary'
        }
    },
    edit: {
        formButtons: {
            className: 'btn-falcon-info'
        }
    },
    remove: {
        formButtons: {
            className: 'btn-falcon-danger'
        }
    }
});

The key here is to know that formButtons is passed into buttons() when the button is activated. (It also can get a little confusing that there are the top level "Buttons" buttons, and the form buttons inside the form...)

Allan

mrsearing-all

Allan, amazing as always, thank you!

I just needed $.fn.dataTable.ext.buttons for my purposes.

Lastly, how can I set the default for the DataTable buttons instead of using preDrawCallback?

I can set individual tables like so and want to do so globally with defaults:

layout: {
    top: {
        rowClass: 'dt-layout-top',
        features: [
            {
                buttons: [
                    {
                        extend: 'create',
                        editor: editor,
                        className: 'btn-falcon-success',
                    },
                    {
                        extend: 'edit',
                        editor: editor,
                        className: 'btn-falcon-info',
                    },
                    {
                        extend: 'remove',
                        editor: editor,
                        className: 'btn-falcon-danger',
                    }

Edit

As I submitted, I tried this and solved my issue:

$.extend(true, $.fn.dataTable.ext.buttons, {
    create: {
        // This is the class for the button that submits the create form
        formButtons: {
            className: 'btn-falcon-primary'
        },
        className: 'btn-falcon-primary fs--1',
    },
    edit: {
        // This is the class for the button that submits the edit form
        formButtons: {
            className: 'btn-falcon-info'
        },
        className: 'btn-falcon-info fs--1',
    },
    remove: {
        // This is the class for the button that submits the remove form
        formButtons: {
            className: 'btn-falcon-danger'
        },
        className: 'btn-falcon-danger fs--1',
    }
});

allan

For those buttons you could do:

DataTable.ext.buttons.create.className = 'btn-falcon-success';
DataTable.ext.buttons.edit.className = 'btn-falcon-info';
DataTable.ext.buttons.remove.className = 'btn-falcon-danger';

Allan