DataTable is not a function error with DataTables JQuery library

Question

I have a simple example of using the Datatable library. I have it working with JSFiddle (http://jsfiddle.net/3hhn7y7f/), but when I try to do it with actual files I get the following errors. I have JQuery defined in the <script> tag so I don't know what the issue is.

Uncaught ReferenceError: jQuery is not defined

Uncaught TypeError: $(...).DataTable is not a function

HTML file

<html>
<head>
 <script type="text/javascript" src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
 <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
 <script type="text/javascript" src="script.js"></script>
 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.8/css/jquery.dataTables.min.css">
</head>
<body>
<table id="example" class="display" width="100%"></table>

 </body>
 </html>

script.js

var dataSet = [
    [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
    [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ],
    [ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ],
    [ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060" ]
];

$(document).ready(function() {
    $('#example').DataTable( {
        data: dataSet,
        columns: [
            { title: "Name" },
            { title: "Position" },
            { title: "Office" },
            { title: "Extn." },
            { title: "Start date" },
            { title: "Salary" }
        ]
    } );
} );

What exactly is not working? After including jquery it was working fine! — Varun
– Varun, Commented Aug 31, 2015 at 16:49
@varun is jquery this one: <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script> if that is the case, am I not linking properly? — user2242044
– user2242044, Commented Aug 31, 2015 at 17:03

jonmrich · Accepted Answer · 2019-06-14 01:29:55Z

11

You likely need to switch the order of the <script> tags.

Put this one:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

BEFORE this one:

<script type="text/javascript" src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>

That is, define jQuery before you define DataTables.

edited Jun 14, 2019 at 1:29

answered Aug 31, 2015 at 17:12

jonmrich

4,3638 gold badges52 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user6789930 Over a year ago

i am having the same problem can you please view this link stackoverflow.com/questions/39566622/…

Hardik Patil Over a year ago

This did not work for me :/

Collectives™ on Stack Overflow

DataTable is not a function error with DataTables JQuery library

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related