CODEWITHSUNDEEP
angularjsbuttondatatablestabletools
user1615304
user1615304

Reputation: 41

Use datatables button extension in AngularJS

I've been using the angularjs.datatables and want to enable to export to excel/pdf. The angularjs-datatables project does include support for TableTools extension but as I read on datatables site TableTools is retired and we should use Buttons for this purpose. I can't seem to find any reference to the new extension being use for angular anywhere. If anyone can point out for me how to use it, I'll be very much appreciate. If it's not possible to use Buttons, please share your experience using TableTools. My goal is to print and export to excel/pdf with customized columns (render differently between view and export)

Thanks.

Upvotes: 3

Views: 6853

Answers (2)

Kalpesh Patel
Kalpesh Patel

Reputation: 21

Try these CDNs:

for Excel and CSV use this CDN

https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js
https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js

for PDF use this CDN

https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js
https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js

Upvotes: 0

floriano
floriano

Reputation: 1

You have to add the required js file: angular-datatables.buttons.min.js

And

add the dependency datatables.buttons to your Angular app

Html:

<div ng-controller="WithButtonsCtrl as showCase">
    <table datatable=""
        dt-options="showCase.dtOptions"
        dt-columns="showCase.dtColumns"
        class="row-border hover">
    </table>
</div>

Js:

angular.module('showcase.withButtons', ['datatables', 'datatables.buttons'])
    .controller('WithButtonsCtrl', WithButtonsCtrl);

function WithButtonsCtrl(DTOptionsBuilder) {
    var vm = this;
    vm.dtOptions = DTOptionsBuilder.fromSource('data.json')
        .withDOM('frtip')
        .withPaginationType('full_numbers')
        // Active Buttons extension
        .withButtons([
            'columnsToggle',
            'colvis',
            'copy',
            'print',
            'excel',
            {
                text: 'Some button',
                key: '1',
                action: function (e, dt, node, config) {
                    alert('Button activated');
                }
            }
        ]);
}

Reference: https://l-lin.github.io/angular-datatables/#/withButtons

Upvotes: 0

Related Questions