Struggling to integrate DataTable and jQuery into my HTML following the example on https://datatables.net/examples/basic_init/zero_configuration.html. However, I can't seem to get any options to work properly. Is there a mistake in my import order? My libraries are up-to-date. As a beginner in web development, any help would be greatly appreciated.
https://i.sstatic.net/FyIIz.png
My imports are as they should be:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Core Reporting</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.20/datatables.css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/mdb.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
</head>
In the body, there is a placeholder div for the table:
<div class="container-fluid" id="main-container" style="margin-top: 120px; max-width: 1800px; background-color: white;">
{% block maincard %}{% endblock %}
</div>
And script imports before closing body:
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.20/datatables.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/popper.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/mdb.min.js') }}"></script>
<script>
$(document).ready(function() {
$('#hypervisorTable').DataTable({
scrollY: 300,
paging: true
});
});
</script>
Extending the home template with a sample tables.html template:
{% extends 'home.html' %}
{% block maincard %}
<table id="hypervisorTable" class="display" width="100%">
<thead>
{% for col in data.columns %}
<th class="th-sm"> {{ col }} </th>
{% endfor %}
</thead>
<tbody>
{% for row in data.index %}
<tr>
<td>{{ data.loc[row, 'Instance type'] }}</td>
<td>{{ data.loc[row, 'Hypervisor'] }}</td>
<td>{{ data.loc[row, 'vCPUs'] }}</td>
<td>{{ data.loc[row, 'Cores'] }}</td>
<td>{{ data.loc[row, 'Threads per core'] }}</td>
<td>{{ data.loc[row, 'Memory (MiB)'] }}</td>
<td>{{ data.loc[row, 'Storage (GB)'] }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}