I have a simple example of using the Datatable library. I have it working with JSFiddle (/), 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=".10.8/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src=".11.3.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href=".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" }
]
} );
} );
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" }
]
} );
} );
1 Answer
Reset to default 11You 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.
<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 Commented Aug 31, 2015 at 17:03