Can't get data tables to work
Can't get data tables to work
jarym
Posts: 2Questions: 1Answers: 0
Hi,
I've made a very simple page that I've saved on my local drive just to get started with DataTables but unfortunately it seems to do nothing.
I've tried the HTML below in IE11 and Chrome (latest) - in both cases I get a plain table with none of the DataTables styling or features applied.
I've used the Chrome Debugger to ensure that the $("zoneTable").DataTable(); line is being hit and indeed it is. No errors in the JS consoles of either browser and the network tab in Chrome shows 200 statuses for both the CSS and JS files on the CDN.
Any suggestions on what I'm doing wrong here?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/datatables.min.css"/>
<script src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/datatables.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
$("zoneTable").DataTable();
});
</script>
<table id="zoneTable">
<thead>
<tr>
<th>Type</th>
<th>Bottom</th>
</tr>
</thead>
<tbody>
<tr>
<td>BAH</td>
<td>2900</td>
</tr>
<tr>
<td>SAL</td>
<td>2895</td>
</tr>
<tr>
<td>BAH</td>
<td>2900</td>
</tr>
<tr>
<td>SAL</td>
<td>2895</td>
</tr>
<tr>
<td>BAH</td>
<td>2900</td>
</tr>
<tr>
<td>SAL</td>
<td>2895</td>
</tr>
</tbody>
</table>
</body>
</html>
This discussion has been closed.
Answers
Gosh, I forgot the most obvious thing - to put a # before the id of the element! Resolved now. I wish there was a delete button!