jquerydatatablesdatatables-1.10

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.

Solution

  • 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>