JS DataTable add export button not showing

Question

JSFiddle code When prompted type "yes"

$(document).ready(function() {
    $('#example').DataTable( {
        dom: '1Bfrtip', 
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
    } );
});

I tried adding this^^ into my JS Code so that I can export the data, but it's not showing up. Any idea what Im doing wrong?

I'm trying to replicate https://jsfiddle.net/p33x5L3t/1/

Not an answer, - but the code in your Fiddle is missing the dom option. The dom option in your question appears to contain the digit 1, whereas I think you meant to type the letter l (for the length change control). See here. — andrewJames
– andrewJames, Commented Jul 21, 2021 at 18:58
Also: In the Fiddle you are trying to replicate, note the 7 resources which need to be included. Are you sure you have them all? Or, you can visit the official downloads page and re-build all the resources you need from a clean start. You do need the dom option - but if a resource is missing, then that alone may not be sufficient. — andrewJames
– andrewJames, Commented Jul 21, 2021 at 18:58

BeerusDev · Accepted Answer · 2021-07-21 19:53:27Z

You need the CDN's to support it. Please visit this page https://datatables.net/download/index

For the export buttons, you need to select the following extensions from the download page: Buttons, HTML5 Export, JSZip, PDFMake, & PrintView.

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.dataTables.min.css"/>
 
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.print.min.js"></script>

I updated your Fiddle and here is a working example with my fix from above. I also put your buttons in a collection so they aren't all over the place (looks a lot better)

https://jsfiddle.net/BeerusDev/q9gcms4r/4/

If my answer helped solve your issue, please remember to accept it/upvote!

Collectives™ on Stack Overflow

JS DataTable add export button not showing

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related