Hi all,
I'm having an issue where im trying to convert a html table to a DataTable using Jquery, however I am seeing NO change.
I've added the links so that JQuery is first, datatables.css is second, then datables.js is third.
I got the 2 Datatable links from:
datatables.net
And I for the JQuery CDN from:
developers.google.com
See code below. I'm not sure what i'm doing wrong!
Many thanks for any insights
I'm having an issue where im trying to convert a html table to a DataTable using Jquery, however I am seeing NO change.
I've added the links so that JQuery is first, datatables.css is second, then datables.js is third.
I got the 2 Datatable links from:
Installation
datatables.net
And I for the JQuery CDN from:
Hosted Libraries | Google for Developers
Get a list of the libraries included in this Google-hosted content distribution network for popular, open source JavaScript libraries.
developers.google.com
See code below. I'm not sure what i'm doing wrong!
Many thanks for any insights
Code:
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
</head>
<body>
<div class="container">
<h1>Product Table</h1>
<table class='table table-bordered' id="product_table">
<thead>
<tr>
<th>Product ID</th>
<th>Product Name</th>
<th>KG</th>
<th>Length</th>
<th>Width</th>
<th>Height</th>
<th>Price (£)</th>
</tr>
</thead>
{% for product in products %}
<tr>
<td>{{product.product_id}}</td>
<td>{{product.product_name}}</td>
<td>{{product.kg}}</td>
<td>{{product.length}}</td>
<td>{{product.width}}</td>
<td>{{product.height}}</td>
<td>{{product.price}}</td>
</tr>
{% endfor %}
</table>
</div><!--End of display table-->
</body>
{% endblock %}
<script type="text/javascript">
$(document).ready(function(){
$('#product_table').DataTable();
});
</script>
</html>
Last edited:
