CODEWITHSUNDEEP
javascriptjqueryangularjsdatatables
Ali-Alrabi
Ali-Alrabi

Reputation: 1698

angularjs datatable button plugin

I'm using angularjs datatable and trying to use button plugin in this page https://l-lin.github.io/angular-datatables/#/withButtons

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

I get Unknown button type: 'columnsToggle', and 'colvis' but when I remove 'columnsToggle', and 'colvis' from code it run without any problems but other button not display except custom button 

{
    text: 'Some button',
    key: '1',
    action: function (e, dt, node, config) {
        alert('Button activated');
    }
}

copy,pdf, excel don't appears,Can anyone help me to fix the problem please?

Upvotes: 7

Views: 8609

Answers (2)

Kalpesh Patel
Kalpesh Patel

Reputation: 21

for excel and csv add this cdn

<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>

for PDF file option add this cdn

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>

Upvotes: 2

Drakkin
Drakkin

Reputation: 908

I had the same problem as you and I find out all the datatables-buttons js files needed to be included:

<script type="text/javascript" src="~/Scripts/datatables-buttons/js/dataTables.buttons.js"></script>
<script type="text/javascript" src="~/Scripts/datatables-buttons/js/buttons.bootstrap.js"></script>
<script type="text/javascript" src="~/Scripts/datatables-buttons/js/buttons.jqueryui.js"></script>
<script type="text/javascript" src="~/Scripts/datatables-buttons/js/buttons.colVis.js"></script>
<script type="text/javascript" src="~/Scripts/datatables-buttons/js/buttons.flash.js"></script>
<script type="text/javascript" src="~/Scripts/datatables-buttons/js/buttons.html5.js"></script>
<script type="text/javascript" src="~/Scripts/datatables-buttons/js/buttons.print.js"></script>

Upvotes: 10

Related Questions