Modal Button Defaults

mrsearing-all · April 16

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 · April 17

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 · April 17

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 · April 17

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

Modal Button Defaults

Modal Button Defaults

Answers

Howdy, Stranger!

Categories

DataTables

Modal Button Defaults

Modal Button Defaults

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables