DataTables Export Button Issue - Button Not Displaying

Question

I'm trying to display an export button in the center of the screen and below my DataTable. The button isn't displaying at all. I've downloaded the DataTable files and they are hosted on my server (hence the local references).

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="DataTables/datatables.css"/>

<script type="text/javascript" src="DataTables/datatables.js"></script>


<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
  $('#example').DataTable( {
      dom: 'Bfrtip',
      buttons: [
      {
        extend: 'collection',
        text: 'Export',
        buttons: [
          'copy',
          'excel',
          'csv',
          'pdf',
          'print'
        ]
      }         
    ]
  });
} );
</script>

I am wondering if I'm just missing a dependency although I used the DataTables download builder.

Caique Romero · Accepted Answer · 2019-12-04 20:31:00Z

16

Make sure you've imported everything you need and take a look at: https://datatables.net/extensions/buttons/examples/initialisation/simple.html

External code:

https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css
https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js
https://cdn.datatables.net/buttons/1.4.0/js/dataTables.buttons.min.js
https://cdn.datatables.net/buttons/1.4.0/js/buttons.flash.min.js
https://cdn.datatables.net/buttons/1.4.0/js/buttons.html5.min.js
https://cdn.datatables.net/buttons/1.4.0/js/buttons.print.min.js
https://cdn.datatables.net/buttons/1.4.0/css/buttons.dataTables.min.css
https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js
https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/pdfmake.min.js
https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/vfs_fonts.js

Working example:

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

<link rel="stylesheet" type="text/css"  href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
<link rel="stylesheet" type="text/css"  href="https://cdn.datatables.net/buttons/1.4.0/css/buttons.dataTables.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/pdfmake.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.0/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.0/js/buttons.flash.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.0/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.0/js/buttons.print.min.js"></script>


<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
    </tbody>
    </table>

edited Dec 4, 2019 at 20:31

answered Aug 22, 2017 at 18:44

Caique Romero

6339 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

zzMzz Over a year ago

This works perfectly! Thanks. I decided to use: dom: 'frtipB' to display the buttons at the bottom of the table. Just wondering, is there anyway to keep the "Show # Entries" when you use these buttons?

zzMzz Over a year ago

That solves it. The dom options are a little confusing at first but I think I've got it now.

JWC May Over a year ago

Thanks In my case, missing of { dom: 'Bfrtip', buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print' ] } inside DataTable() was the issue :-)

JWC May Over a year ago

Its missing the l flag in dom. l for "length changing input control". dom: 'lBfrtip' otherwise Show Entries dropdown won't appear.

Gufran Hasan · Accepted Answer · 2022-04-23 08:08:22Z

2

All the above answers are almost correct but still, the buttons are not showing. You can also use the following trick to display export buttons.

var table = $('#example').DataTable({
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ]
        });
        $('#btn-place').html(table.buttons().container());

Now create a div where you want to add these buttons.

<div id="btn-place"></div>

Reference link

answered Apr 23, 2022 at 8:08

Gufran Hasan

9,4297 gold badges45 silver badges57 bronze badges

Collectives™ on Stack Overflow

DataTables Export Button Issue - Button Not Displaying

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related