[Datatables not working] Using Flask and Bootstrap4
[Datatables not working] Using Flask and Bootstrap4
Romn
Posts: 3Questions: 1Answers: 0
Hi,
I am trying Datables for the first time and I can't have it working on my website (running with Flask and supported by Bootstrap 4). Sorry, I don't know much about Javascript but here are my files.
This is my layout.html base template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="TKWM Administration Page">
<meta name="author" content="Me>
<title>My Title</title>
<!-- styles -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<!--<link rel="stylesheet" href="{{ url_for('static', filename='fontawesome/css/fontawesome-all.css') }}" >-->
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
</head>
<body>
<!-- Static navbar -->
{% include 'navbar.html' %}
{% include 'universe-navbar.html' %}
<div class="container">
<div class="content">
<!-- child template -->
{% block content %}
{% endblock %}
</div>
{% include 'footer.html' %}
</div>
<!-- /.container -->
<!-- scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="integrety-key" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script defer src="https://pro.fontawesome.com/releases/v5.0.8/js/all.js" integrity="integrety-key" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
{{ moment.include_jquery() }}
{{ moment.include_moment() }}
{{ moment.lang(g.locale) }}
</body>
</html>
And on my /test route I am rendering the test.html template which is:
{% extends "layout.html" %}
{% block content %}
<script>
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
<div class="page-header">
<h2>This is a test</h2>
</div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
[...] (copied from example)
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
{% endblock %}
And that's it, but I don't have any feature in my table.
This discussion has been closed.
Answers
Is this line loading jQuery?
{{ moment.include_jquery() }}If so then that is likely the problem because you are loading jQuery twice. You only want to load it once.
Kevin
Indeed it was, and it seemed my line:
was not working, I replaced it with Google CDN.
I tried with just as the only scripts imported:
But it is still not working.
Does your browser's console show any errors?
I would verify that the Datatables CSS and JS files are being loaded.
I tried your test.html code here and it works.
Can you post a link to your page? If not maybe you can use the browser's view source and copy into my example. Maybe we can troubleshoot it from there.
Kevin
It said that
$ is not defined, so I moved all the javascript importing part in the<head>section of the webpage, now it is working, that was just this.I thought it was alright to have them at the end of the page.
It should be - demo here.
Allan