DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Unable to get Datatables 2 working

Unable to get Datatables 2 working

henrik khenrik k Posts: 6Questions: 2Answers: 0
in Free community support

I'm getting these errors when starting to test DataTables 2, on Safari:;
[Error] TypeError: undefined is not an object (evaluating 'w.fn.dataTable.Api')
(anonymous function) (datatables.min.js:23:68056)
(anonymous function) (datatables.min.js:23:418)
Global Code (datatables.min.js:23:443)
[Error] TypeError: $('#myTable').DataTable is not a function. (In '$('#myTable').DataTable()', '$('#myTable').DataTable' is undefined)
(anonymous function) (jquery-3.7.1.min.js:2:28768)

On Chrome:

datatables.min.js:23 Uncaught TypeError: Cannot read properties of undefined (reading 'Api')
at datatables.min.js:23:68056
at datatables.min.js:23:416
at datatables.min.js:23:442
(anonymous) @ datatables.min.js:23
(anonymous) @ datatables.min.js:23
(anonymous) @ datatables.min.js:23
jquery-3.7.1.min.js:2 jQuery.Deferred exception: $(...).DataTable is not a function TypeError: $(...).DataTable is not a function
at HTMLDocument.<anonymous> (http://localhost/dist/test.html:8:21)
at e (http://localhost/lib/jquery/jquery-3.7.1.min.js:2:27028)
at t (http://localhost/lib/jquery/jquery-3.7.1.min.js:2:27330) undefined
ce.Deferred.exceptionHook @ jquery-3.7.1.min.js:2
t @ jquery-3.7.1.min.js:2
setTimeout (async)
(anonymous) @ jquery-3.7.1.min.js:2
c @ jquery-3.7.1.min.js:2
fireWith @ jquery-3.7.1.min.js:2
fire @ jquery-3.7.1.min.js:2
c @ jquery-3.7.1.min.js:2
fireWith @ jquery-3.7.1.min.js:2
ready @ jquery-3.7.1.min.js:2
P @ jquery-3.7.1.min.js:2
jquery-3.7.1.min.js:2 Uncaught TypeError: $(...).DataTable is not a function
at HTMLDocument.<anonymous> (test.html:8:21)
at e (jquery-3.7.1.min.js:2:27028)
at t (jquery-3.7.1.min.js:2:27330)
(anonymous) @ test.html:8
e @ jquery-3.7.1.min.js:2
t @ jquery-3.7.1.min.js:2
setTimeout (async)
ce.readyException @ jquery-3.7.1.min.js:2
(anonymous) @ jquery-3.7.1.min.js:2
e @ jquery-3.7.1.min.js:2
t @ jquery-3.7.1.min.js:2
setTimeout (async)
(anonymous) @ jquery-3.7.1.min.js:2
c @ jquery-3.7.1.min.js:2
fireWith @ jquery-3.7.1.min.js:2
fire @ jquery-3.7.1.min.js:2
c @ jquery-3.7.1.min.js:2
fireWith @ jquery-3.7.1.min.js:2
t @ jquery-3.7.1.min.js:2
setTimeout (async)
(anonymous) @ jquery-3.7.1.min.js:2
c @ jquery-3.7.1.min.js:2
fireWith @ jquery-3.7.1.min.js:2
fire @ jquery-3.7.1.min.js:2
c @ jquery-3.7.1.min.js:2
fireWith @ jquery-3.7.1.min.js:2
ready @ jquery-3.7.1.min.js:2
P @ jquery-3.7.1.min.js:2

OS: MacOS 14.3.1 on Apple Silicon

Answers

  • henrik khenrik k Posts: 6Questions: 2Answers: 0
    edited February 16

    HTML:

    <html>
<head>
    <script type="text/javascript" src="../lib/jquery/jquery-3.7.1.min.js"></script>
    <link rel="stylesheet" href="../lib/DataTables/datatables.min.css">
    <script type="text/javascript" src="../lib/DataTables/datatables.min.js"></script>
    <script>
        $(document).ready( function () {
            $('#myTable').DataTable();
        });
    </script>
</head>
<body>

<table id="myTable" class="display">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
        </tr>
    </tbody>
</table>

</body>
</html>

    Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

  • kthorngrenkthorngren Posts: 21,299Questions: 26Answers: 4,944

    I copied your code into this test case:
    https://live.datatables.net/kupucoyu/1/edit

    It works using both Chrome and Safari on a Mac. Please post a link to a test case showing the issue so we can help debug.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • henrik khenrik k Posts: 6Questions: 2Answers: 0

    I'm running on a local web server, will try to see if if the problem are related to this or not. The same code runs flawlessly on Datatables 1.13

  • kthorngrenkthorngren Posts: 21,299Questions: 26Answers: 4,944
    edited February 16

    Possibly clearing the browser’s cache, to make sure the updated datatables.js is loaded, will fix it.

    Is the code you posted the full page?

    Kevin

  • henrik khenrik k Posts: 6Questions: 2Answers: 0

    I've done some more testing and I've now got to this point:

    -Datatables 2 will load and work as expected if I in the HTML link to the datatables.js script.
    -DataTablaes 2 will not load at all when I in the HTML link to the DataTables.min.js script.

    -Datatables 2 will load and work as expected if I link to the CDN.

    Could it be something with the minifying of the datatebles 2?

  • kthorngrenkthorngren Posts: 21,299Questions: 26Answers: 4,944

    I downloaded and have tried datatables.min.js and it does work. However two others, in this thread, have mentioned issues with datatables.min.js.

    @allan will need to take a look.

    Kevin

  • allanallan Posts: 63,441Questions: 1Answers: 10,459 Site admin

    Apologies - I've just correct this error in the download builder. It should work correctly now if you do a fresh download.

    Allan

Sign In or Register to comment.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.