I’m having trouble getting DataTables to work in my Django App. I have tested the template where I am using this in a straight HTML file and it works as expected. I’m basically using the sample HTML from the DataTables.net in the Getting Started guide.
I’m trying to incorporate this into my django application. I have added the following files to my Main.HTML file which I am extending in the template.
<link rel="stylesheet" href="https://cdn.datatables.net/2.3.2/css/dataTables.dataTables.css"/>
<script src="https://cdn.datatables.net/2.3.2/js/dataTables.js"></script>
I also have a local copy of JQuery in the project and I can see that it is loaded through the Network tab of the browser when I inspect. Here is the code used to include JQuery which is also on the Main.html template.
<script type="text/javascript" src="{% static 'js/jquery-3.7.1.min.js' %}"></script>
I have confirmed that this is also loaded by inspecting the page in the browser.
This a snipped of the HTML that includes the table.
<table id="deptTable" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
Finally, I have the following code from DataTables to setup the HTML table.
{% block javascript %}
$(function () {
console.log("Hello from JQuery!");
$("#deptTable").DataTable();
});
{% endblock javascript %}
However, when I view the resulting page, no formatting is done to the table. I also see no JQuery or JavaScript errors.
I was expecting to see the “Hello from JQuery!” output to the console, but I am not seeing that either, which tells me that this JQuery code is never executed.
What am I missing here?
Does that Javascript block exist in the browser? (You have a block named javascript in your base template?)
Does that code reside before the html table in the page? (As an iife, it executes when encountered. It might execute before the table element is defined. You probably want that code to run when the page is completely ready.)
If you run that line in the browser console, what happens?
Do you have the datatables script after the jquery script? (Are they both showing as being loaded?)
As always, thanks for the quick reply Ken.
I executed the JavaScript call in the console and it did in fact format the table as it should, and I saw the log message in the console.
The JavaScript block is at the very bottom of the page, so my assumption is that it would be executed AFTER the table had been established. Obviously, this is not happening, or possibly the code is not being executed at all.
Here is the full template page. Maybe you will see something wrong here?
{% extends 'main.html' %}
{% block content %}
<div class="h5 text-white bg-secondary px-5 pt-2 pb-2">
Department Setup
</div>
<table id="deptTable" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
{% endblock content %}
{% block javascript %}
$(function () {
console.log("Hello from JQuery!");
$("#deptTable").DataTable();
});
{% endblock javascript %}
Here is the section of the Main.html template which is extended into the template above.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script type="text/javascript" src="{% static 'js/jquery-3.7.1.min.js' %}"></script>
<link rel="stylesheet" type="text/css" href="{% static 'styles/styles.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'styles/bootstrap.css' %}">
<script type="javascript" src="{% static 'js/script.js' %}"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/2.3.2/css/dataTables.dataTables.css"/>
<script src="https://cdn.datatables.net/2.3.2/js/dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="{% static 'styles/styles.css' %}">
<title>Payroll</title>
</head>
I’m not sure if the code is being executed BEFORE the table is there, or if it is not being executed at all. Even if it were being executed before the table is created, I would expect the console message to still appear.
Please post your main.html template.
I posted that at the end of the previous message, but here it is.
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script type="text/javascript" src="{% static 'js/jquery-3.7.1.min.js' %}"></script>
<link rel="stylesheet" type="text/css" href="{% static 'styles/styles.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'styles/bootstrap.css' %}">
<script type="javascript" src="{% static 'js/script.js' %}"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/2.3.2/css/dataTables.dataTables.css"/>
<script src="https://cdn.datatables.net/2.3.2/js/dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="{% static 'styles/styles.css' %}">
<title>Payroll</title>
</head>
<body>
{% include 'navbar.html' %}
<h6 class="agency-selected px-2 py-2">{{ request.session.selected_agency }}</h6>
{% if messages %}
{% for message in messages %}
{% if message.tags == "success" %}
<div id="myAlert" class="alert alert-success alert-dismissible fade show" role="alert">
<strong>Note!</strong> {{ message }}
<button type="button" class="btn-close btn-success" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endif %}
{% if message.tags == "warning" %}
<div id="myAlert" class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Warning!</strong> {{ message }}
<button type="button" class="btn-close btn-warning" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endif %}
{% if message.tags == "error" %}
<div id="myAlert" class="alert alert-danger alert-dismissible fade show" role="alert">
<strong>Error!</strong> {{ message }}
<button type="button" class="btn-close btn-danger" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endif %}
{% endfor %}
{% endif %}
{% block content %}
{% endblock content %}
</body>
</html>
Let me know if you need to see anything else.
Thanks!!!
Okay, I finally figured this out.
Apparently, all I needed to do was to include the JQuery call…
<script type="text/javascript">
$(document).ready(function () {
$('#deptTable').DataTable();
});
</script>
at the top of the HTML in the template. I was enclosing this in {% block javascript %}/{% endblock javascript %} at the bottom of the page, but it was being ignored.
The DataTable formatting it working now!
It wasn’t being ignored, it wasn’t even being rendered. You don’t have a block javascript defined in the parent template, so it wasn’t being included in the page.
Okay, thanks Ken. I’ll have to look into the JavaScript block template a bit more, because obviously I was using it incorrectly.
Thanks again!
You may also want to review the docs for Template Inheritance.
Again, the issue is that you have defined a block in a template that does not exist in the template that it extends.