Im trying to use DataTables in my extended html file. Ive trialed it all on a blank html file (no base template) and it works but clearly something is going wrong with the order / how im sourcing the other cdns.
Heres my scripts...
Base.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Collapsible sidebar using Bootstrap 3</title>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Scrollbar Custom CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">
<!-- Our Custom CSS -->
<!-- <link rel="stylesheet" href="{{ url_for('static', filename = 'style.css') }}"> -->
<link rel="stylesheet" href="../static/style.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
</head>
<body>
<div class="wrapper">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div id="dismiss">
<i class="glyphicon glyphicon-arrow-left"></i>
</div>
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components">
<p>Dummy Heading</p>
<li class="active">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false">Home</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li><a href="#">Home 1</a></li>
<li><a href="#">Home 2</a></li>
<li><a href="#">Home 3</a></li>
</ul>
</li>
<li>
<a href="institutions">Institutions</a>
<a href="institutionstest">Institutions Test</a>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">Pages</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
<ul class="list-unstyled CTAs">
<li><a href="https://bootstrapious.com/tutorial/files/sidebar.zip" class="download">Download source</a></li>
<li><a href="https://bootstrapious.com/p/bootstrap-sidebar" class="article">Back to article</a></li>
</ul>
</nav>
<!-- Page Content Holder -->
<div id="content">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
<i class="glyphicon glyphicon-align-left"></i>
<span>Open Sidebar</span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Page</a></li>
<li><a href="#">Page</a></li>
<li><a href="#">Page</a></li>
<li><a href="#">Page</a></li>
</ul>
</div>
</div>
</nav>
{% block content %}
{% endblock %}
</div>
</div>
<div class="overlay"></div>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Bootstrap Js CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- jQuery Custom Scroller CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#sidebar").mCustomScrollbar({
theme: "minimal"
});
$('#dismiss, .overlay').on('click', function () {
$('#sidebar').removeClass('active');
$('.overlay').fadeOut();
});
$('#sidebarCollapse').on('click', function () {
$('#sidebar').addClass('active');
$('.overlay').fadeIn();
$('.collapse.in').toggleClass('in');
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
});
</script>
</body>
</html>
and my Table.html
{% extends "base.html" %}
{% block content %}
<head>
<title> My maps </title>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.css" rel="stylesheet" />
<link rel="stylesheet" href="../static/institutions.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
</head>
<body>
<div class="parent row" id="sections">
<section>
<div class='parent'>
<div id='map'></div>
</div>
<div class='child'>
<table id="institutionTable" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Sector</th>
<th>Type</th>
<th>Address</th>
</tr>
</thead>
<tbody>
{% for row in inst_tab %}
<tr>
<td>{{ row.name }}</td>
<td>{{ row.sector }}</td>
<td>{{ row.typ }}</td>
<td>{{ row.address }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</section>
</div>
<script>
// DataTable
$(document).ready(function () {
$("#institutionTable").dataTable({
"aoColumnDefs": [{ 'bSortable': false, 'aTargets': [3] }],
"bSort": true,
"scrollY": 100,
"scrollX": true,
dom: 'Blfrtip',
buttons: [
'excelHtml5'
]
});
});
</script>
</body>
{% endblock %}
Am I sourcing things in the wrong place? Im new to front end development so might be being stupid...
Any advice would be great, im sure this would be a quick fix for someone who knows what they're doing.
Also some info/resources on where to source certain things (head? at the bottom?) and in what order (does css come before js? do some js scripts need to come before others?) would be great as I don't seem to be having much luck!
Thanks
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
