'DataTables Export Button Issue - Button Not Displaying

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.

jquerydatatablesdatatables-1.10


Solution 1:[1]

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>

Solution 2:[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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Gufran Hasan

Related Questions