CODEWITHSUNDEEP
javascriptangularjsangular-datatables
toddeTV
toddeTV

Reputation: 1517

AngularJS angular-datatables custom attribute in buttons

I am using the following with npm: 

"dependencies": {
    "angular": "1.6.4",
    "datatables.net": "1.10.19",
    "datatables.net-buttons": "1.5.3",
    "datatables.net-buttons-dt": "1.5.3",
    "angular-datatables": "0.6.2",
    // and more that is not question related
}

When I now create a DataTable like angular-datatables tell in the examples, everything is working great.
For example: 

vm.dtOptions = DTOptionsBuilder
    .newOptions()
    // data fetch and processing animation and ...
    .withButtons([
        'colvis',
        'copy',
        'print',
        'excel',
        'pdf',
        {
            text: 'Some button',
            key: '1',
            action: function (e, dt, node, config) {
                alert('Button activated');
            },
            className: 'someCustomCssClass',
        },
    ])
    .withBootstrap();
vm.dtColumns = [
    DTColumnBuilder.newColumn('id').withTitle('ID').withClass('text-danger'),
    DTColumnBuilder.newColumn('firstName').withTitle('First name'),
    DTColumnBuilder.newColumn('lastName').withTitle('Last name')
];

Now I want to modify the custom Button "Some button".
I want the button to have a custom HTML attribute.

Current the Button gets rendered like this: 

<button class="dt-button someCustomCssClass ng-scope" tabindex="0" aria-controls="DataTables_Table_0" type="button">
    <span>Some button</span>
</button>

But the button should have an "access" attribute in order to hide/show the button depending on the user roles.
So it should be for example: 

<button access="ROLE_ADMIN" class="dt-button someCustomCssClass ng-scope" tabindex="0" aria-controls="DataTables_Table_0" type="button">
    <span>Some button</span>
</button>

But how can I add a new attribute to a button?
Adding a custom CSS class is easy with "className", but a completely new attribute?

Thanks for the help and
greetings

UPDATE

Currently I am appending a completly custom button like this: 

var myEl = angular.element( document.querySelector( '.dataTables_wrapper > .dt-buttons' ) );
myEl.append('<button with all my needs></button>');
$compile(myEl.contents())(scope);

This is working, but now I can not use the DataTable information and the integration itself is very poor.
Also it is a workaround and no good solution at all!
I really hope the init that @davidkonrad is mentioned can solve this.

Upvotes: 3

Views: 1823

Answers (1)

davidkonrad
davidkonrad

Reputation: 85578

Use the init callback for buttons you want to enrich with custom attributes :

.withButtons([
    'colvis',
    'copy',
    'print',
    'excel',
    'pdf',
    {
        text: 'Some button',
        key: '1',
        action: function (e, dt, node, config) {
            alert('Button activated');
        },
        className: 'someCustomCssClass',
        //-----------------------------------
        init: function(dt, node, config) {
            node.attr('access', "ROLE_ADMIN")
        }
    },
])

Upvotes: 1

Related Questions