"$.fn.dataTable.Buttons is not a constructor" Error Displayed

murday1983

I am trying to place the buttons in another DIV on my page with other buttons in but i can not get this working at all as i always keep getting an error:

$.fn.dataTable.Buttons is not a constructor

JQuery

var table;

$.ajax({
    url: 'XXXXXXX',
    type: 'get',
    dataType: 'json',
    success: function (data) {
         table = $('#reportDataTable')
            .DataTable({
                searching: false,
                colReorder: false,
                paging: false,
                info: false,
                data: data,
                dom: 'Bfrtip',
    buttons: [
        'copy', 'csv', 'excel', 'pdf', 'print'
    ]...... //Other Code Here

//var tableTools = new $.fn.dataTable.Buttons( table, {
new $.fn.dataTable.Buttons( table, {
    "buttons": [
        "copy",
        "csv",
        "xls",
        "pdf",
        { "type": "print", "buttonText": "Print me!" }
    ]
} );

// $( tableTools.fnContainer() ).insertBefore('table.reportDataTable');
//$('#reportDataTable').DataTable().buttons().container().appendTo('#reportSectionButtons');
$('#reportDataTable').DataTable().buttons().container().insertBefore('#reportSectionButtons');

HTML

 <div id="reportSectionButtons" class="col-lg-6 text-right">
 <!-- WANT BUTTONS IN THIS DIV -->
    <button id="colDescButton" type="button" class="btn btn-secondary"
        data-toggle="modal" data-target="#colDescModal"
        style="margin-right: 2.5rem">
        Column descriptions
    </button>
</div>
<table id="reportDataTable" class="table table-striped">
    <thead>
        <tr>
            <th>Company</th>
            <th>Service</th>
            <th>Group name</th>
            <th>Start date</th>
            <th>End date</th>
            <th>Extension</th>
            <th>Caller ID</th>
            <th>Frequency</th>
            <th>Standard cost</th>
            <th>Billed</th>
            <th>Quantity</th>
            <th>Storage (GB)</th>
            <th>Inv month/year</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
<script src="http://datatables.net/download/build/dataTables.tableTools.nightly.js?_=60133663e907c73303e914416ea258d8"></script>

The commented out code is things i have tried

kthorngren

Not sure exactly what the problem is but I have a couple things for you to look at:

1. You are also loading Tabletools which is now retired. Buttons is the replacement. Maybe they are conflicting. Try removing Tabletools.
2. My understanding is you don't want to use the B option in dom: 'Bfrtip', and buttons option when also using the constructor method new $.fn.dataTable.Buttons. I believe you want to use one or the other.
3. Make sure the buttons JS and CSS files are loading correctly.

Kevin

murday1983

@kthorngren Removed the TableTools and also replaced the button with the following code instead

.DataTable({
             buttons: true,

And all files loading correctly but still have the issue

kthorngren

I don't think buttons: true is a valid option. This page describes the basic initialization options:
https://datatables.net/extensions/buttons/

You can find examples here:
https://datatables.net/extensions/buttons/examples/

If these don't help then we would need to see what you are doing. Please post a link to your page or a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin