Adding datatables.buttons

[ixperiencenl]

Hi,

I'm trying to use the buttons on the datatables. I added 'datatables.buttons' to the index.modules.js and the .withButtons option on creating the Datatable.

Now I know I need to add the additional js files for the DT buttons functionality.... but WHERE? :) Please help me out, I think this is useful for others as well as I spent a few hours Googling it without luck :(

[silverbux]

Hi, not sure if i got the question right, but if the question is where to put button functionality it should be on the controller of datatables.buttons, and im assuming you created a new component or perhaps directive datatables.buttons you have to make it a little more flexible and allow passing of parameters on it to make it reusable, check the url below regarding this

angularjs-pass-argument-to-directive

[ixperiencenl]

Hi Silverbux,

Thanks for the quick reply. I think there's a little hickup in the communication. I'll try to explain the situation.

I have the datatables plugin working (because it's standard in this repo, thanks for that :) ) - and it's added into index.modules.js as so: angular.module('app.components', [ 'ui.router', 'angular-loading-bar', 'restangular', 'ngStorage', 'satellizer', 'ui.bootstrap', 'chart.js', 'mm.acl', 'datatables' ])

To use it in my controller I added the 'DTOptionsBuilder, DTColumnBuilder' directives in the constructor, which is working fine.

But now I wanted to use the button functionality as well, and I added 'datatables.buttons' into the modules array. This works because the datatables.buttons is included in the angular datatables package. So far so good. But now I need to use it in the controller. So for that I just add .withButtons to my datatables instance. No errors, but no buttons either. So I read on the angular-datatables page (https://l-lin.github.io/angular-datatables/#/withButtons) that I need to include the additional JS files as well.... but now my question is, where to add this? Or do I need to include the contents of those files into the big vendor.js (root/public/js/vendor.js) file?

Hope this shows the underlying problem I have atm.

[silverbux]

you could add them with

bower install --save datatables.net-buttons
bower install --save datatables.net-buttons-dt

reference: https://datatables.net/download/bower

it should save the files on bower_components, and should be automatically added on the vendor.js, if it's not loading correct files you could override settings on /tasks/bower.task.js.

your last resort would be adding it on resources/views/index.blade.php though i don't really recommend this one.

though i haven't really tried this, not really sure how angular-datatables implemented / supported extensions.

you might want to consult as well https://github.com/l-lin/angular-datatables

[ixperiencenl]

Ha! You're a great help! It's working perfectly.

So for anyone else that wants to use these handy features, do as @silverbux mentioned in the above post and then in your datatables instance add

.withButtons([
            'columnsToggle',
            'colvis',
            'copy',
            'print',
            'excel',
            {
                text: 'Some button',
                key: '1',
                action: function (e, dt, node, config) {
                    alert('Button activated');
                }
            }
        ])

Like described in the documentation on https://l-lin.github.io/angular-datatables/#/withButtons There's no need to add extra arguments to the constructor of your component, works like a charm.