DTOptionsBuilder.withButtons() not working, it doesn't shows the button.

[jex310]

I'm using the v0.5.1 datatables. I already included in my index.html

<script src="/app/bower_components/datatables/media/js/jquery.dataTables.min.js"></script>
<script src="/app/bower_components/angular-datatables/dist/angular-datatables.min.js"></script>
<script src="/app/bower_components/angular-datatables/dist/plugins/bootstrap/angular-datatables.bootstrap.min.js"></script>
<script src="/app/bower_components/angular-datatables/dist/plugins/buttons/angular-datatables.buttons.js"></script>
<script src="/app/bower_components/angular-datatables/dist/plugins/buttons/angular-datatables.buttons.min.js"></script>

and added the modules 'datatables', 'datatables.bootstrap', 'datatables.buttons' in my app.

Based from example of this link angular-datatables/#/withButtons I didn't get this file vendor/datatables-buttons/js/dataTables.buttons.js after I updated my bower.

[l-lin]

Get it directly from the DataTables website.

[jex310]

Also with dataTables.columnFilter.js can't find the cdn for this plugin.

[l-lin]

Column filter is not part of the official extension of DataTables. You can fetch the files in the extension website.

[alesanfer]

How to implements this option (buttons) with the angular-datatables?
i'm using:

    vm.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
        var defer = $q.defer();
        $http.get('http://localhost/test/public/read-users').then(function(result) {
            defer.resolve(result.data);
        });
        return defer.promise;
    })
      .withPaginationType('full_numbers')
      .withOption('buttons',['copy', 'excel', 'pdf'])
      .withOption('createdRow', createdRow);

Thanks

[l-lin]

See the documentation.

[Hesesses]

Hello,

I'm using the same 'with buttons' example and my table looks like this:

var vm = this;
        vm.dtOptions = DTOptionsBuilder.fromSource('https://l-lin.github.io/angular-datatables/data.json')
        .withDOM('frtip')
        .withPaginationType('full_numbers')
        .withBootstrap()
        // Active Buttons extension
        .withButtons([
            'columnsToggle',
            'colvis',
            'copy',
            'print',
            'excel',
            {
                text: 'Some button',
                key: '1',
                action: function (e, dt, node, config) {
                    alert('Button activated');
                }
            }
        ])
        ;
        vm.dtColumns = [
            DTColumnBuilder.newColumn('id').withTitle('ID'),
            DTColumnBuilder.newColumn('firstName').withTitle('First name'),
            DTColumnBuilder.newColumn('lastName').withTitle('Last name')
        ];

Any ideas whats wrong? (I'm using the latest 0.5.5)

[l-lin]

Did you add the JS files?

<script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.colVis.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>
<script src="vendor/angular-datatables/dist/plugins/buttons/angular-datatables.buttons.min.js"></script>

[Hesesses]

The problem was that I needed bower install datatables.net-buttons-bs and this was written nowhere