yajra/laravel-datatables-html

Remove the btn-secondary when create a Button

quanengineering opened this issue · 2 comments

When creating a new Button, by using Button::make('create') or Button::raw('create'), the generated button already includes the btn-secondary class:

<button class="btn btn-secondary"></button> 

Sometimes, I want to use other class names, like the outline button, like this:

Button::raw('create')->className('btn btn-outline-primary')

but the btn-secondary is still there and will override the result, which is not what I expect:

2020-06-08_00-40

So is there any way to remove that btn-secondary class? Thanks in advance.

Best solution till now: run a function on initComplete to remove it

initComplete("function () {
   $('.dt-buttons .btn').removeClass('btn-secondary');
}")
yajra commented

Afaik, it is part of BS4 default classes for buttons. You can override the defaults like:

$.extend(true, $.fn.dataTable.Buttons.defaults, {
    dom: {
        container: {
            className: 'dt-buttons'
        },
        button: {
            className: 'btn btn-sm btn-secondary'
        },
        collection: {
            tag: 'div',
            className: 'dt-button-collection dropdown-menu',
            button: {
                tag: 'a',
                className: 'btn-sm dt-button dropdown-item',
                active: 'active',
                disabled: 'disabled'
            }
        }
    }
});

Also, my way of handling the button styles on PHP side is by creating a base class. For instance, I have a base CreateButton that I can reuse for consistency in design throughout the code base.

namespace App\Editor\Buttons;

use Yajra\DataTables\Html\Button;

class CreateButton extends Button
{
    public function __construct($attributes = [])
    {
        $this->extend('create')
             ->editor('editor')
             ->name('create')
             ->className('btn-success');

        parent::__construct($attributes);
    }
}