Export buttons not working

bfullen

I am using the following versions:
jQuery 2.2.0,
JSZip 2.5.0,
pdfmake 0.1.18,
DataTables 1.10.10

I am getting an error when running my page:

Unhandled exception at line 42, column 1 in http://localhost:17480/Scripts/DataTables/dataTables.buttons.js

0x800a138f - JavaScript runtime error: Unable to get property 'ext' of undefined or null reference

JavaScript File:

// DataTable
    var table = $('#myDataTable').DataTable({
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ],
        "order": [[1, "desc"]],
        "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
        "columnDefs": [{ "targets": 0, "orderable": false, "searching": false }],
        "stateSave": true,
    });

HTML File:

<link href="~/Content/DataTables/css/jquery.dataTables.css" rel="stylesheet" />
<link href="~/Content/DataTables/css/buttons.dataTables.css" rel="stylesheet" />

<script src="~/Scripts/jquery-2.2.0.js"></script>
<script src="~/Scripts/DataTable.js"></script>
<script src="~/Scripts/DataTables/dataTables.buttons.js"></script>
<script src="~/Scripts/DataTables/buttons.flash.js"></script>
<script src="~/Scripts/jszip.js"></script>
<script src="~/Scripts/pdfmake/pdfmake.min.js"></script>
<script src="~/Scripts/pdfmake/vfs_fonts.js"></script>
<script src="~/Scripts/DataTables/buttons.html5.js"></script>
<script src="~/Scripts/DataTables/buttons.print.js"></script>

<div class="container-fluid">

    <table id="myDataTable" class="display compact" cellspacing="0" style="width: 100%;">
        <thead>
            <tr>
                <th ></th>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 2</th>
            </tr>
        </thead>

        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td class ="text-nowrap">
                        @Html.ActionLink("Edit", "Edit", new { id = item.table_key }) |
                        @Html.ActionLink("Details", "Details", new { id = item.table_key })
                    </td>
                    <td class="text-nowrap">
                        @Html.DisplayFor(modelItem => item.col1)
                    </td>
                    <td class="text-nowrap">
                        @Html.DisplayFor(modelItem => item.col2)
                    </td>
                    <td class="text-nowrap">
                        @Html.DisplayFor(modelItem => item.col3)
                    </td>
                </tr>
            }
        </tbody>

        <tfoot>
            <tr>
                <th></th>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
            </tr>
        </tfoot>
    </table>
</div>

allan

I don't immediately see anything wrong there. Could you link to a test case showing the issue, per the forum rules please.

My best guess is that jQuery is being loaded more than once on the page, but that's really only a guess without having the full page available to check.

Allan

bfullen

Not sure how to link to fiddle. I will research that for future posts. I believe I figured it out though. I added the Scripts to the bundles file and they started working.