$('#table_id').DataTable() not working
$('#table_id').DataTable() not working
gib65
Posts: 29Questions: 13Answers: 0
Hello,
I have an application in which I'm trying to setup a DataTable, but it's giving me an error. It's telling me that DataTable() is not a function.
Here's the code:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Home - Risk Alive</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<meta name="description" content="Risk Alive: bringing facility safety alive!"/>
<link href="/dist/img/favicon.ico" rel="SHORTCUT ICON"/>
<link href="/dist/css/vendor.css" type="text/css" rel="stylesheet" />
<link href="/dist/css/main.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>
</head>
<body class="hold-transition skin-black sidebar-mini fixed">
<script src="/dist/js/vendor.js"></script>
<table id="table_id" class="display" width="100%">
<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>
<tr>
<td>Row 3 Data 1</td>
<td>Row 3 Data 2</td>
</tr>
<tr>
<td>Row 4 Data 1</td>
<td>Row 4 Data 2</td>
</tr>
<tr>
<td>Row 5 Data 1</td>
<td>Row 5 Data 2</td>
</tr>
<tr>
<td>Row 6 Data 1</td>
<td>Row 6 Data 2</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$('#table_id').DataTable(); // ERROR: "DataTable() is not a function"
});
</script>
Can anyone see anything that's missing? How can I get the line $('#table_id').DataTable() to work?
I'm sorry I don't have an online example right now. I don't have access to my server. I hope the above code will do.
Thanks.
This discussion has been closed.
Answers
DataTables requires jQuery to be referenced first in your HTML head tag..
Yes, I have JQuery being referenced elsewhere in the application.
It turns out the problem was the references to cdn.datatables.net. They needed to be prefixed with http:
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.13/css/jquery.dataTables.css">
It would do if you were loading the host page with anything other than
http://orhttps://.//is a protocol relative path.Allan
Duplicate thread.