Django, datatables doesn't render table in html template - django

Question

I'm sending the data from a views function to a template as a table and trying to use datatables to turn a table into a more functional table, so I can order elements based on the different columns...
The table by itself appears... But it's only a html structured table, not a dynamic table, where it could be ordered by the columns.
I was following: https://datatables.net/manual/
So far I found advises:
-- Check the integrity of the table (so it has a head tag and body tags)- I have it
--all tags must be closed - they are closed
-- use the Javascript function, like so:
$(document).ready( function () {
$('#table_id').DataTable();
} );
I have no idea what else could be wrong...
I have to mention... I would like to avoid saving data to a database, just would like to take data from views and post it to the table in a template... That's why I choose datatables over django_tables2... Because it seems datatables have a way just render tables from data...
My code:
views.py:
...
for Loop:
...
data_list.append({'ref':ref[k], 'ref_num':ref_num[k], 'ref_pr':ref_pr[k]})
k=k+1
context={
data_list,
}
return render(request, 'objects.html', context=context)
The page renders, so no faults in urls...
html page:
{% extends "base_generic.html" %}
{% load static %}
{% block css %}
<link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}">
{% endblock %}
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8"
src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.js"></script>
{% block content %}
<div>
<table id='table_id' class="display">
<thead>
<tr>
<th>ref</th>
<th>ref_num</th>
<th>ref_pr</th>
</tr>
</thead>
<tbody>
{%for data in data_list%}
<tr>
<td>{{data.ref}}</td>
<td>{{data.ref_num}}</td>
<td>{{data.ref_pr}}</td>
</tr>
{%endfor%}
</tbody>
</table>
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8"
src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.js"></script>
<script>
$(document).ready( function () {
$('#table_id').dataTable();
} );
</script>
{% endblock %}
As far as I'm aware the general principle is to set all scripts down the page, so they load last in the sequence, so the page will be load faster. But I tried to set scripts in all places where it's possible, up the page and in the general page. It didn't work for me. Also as it could be seen from the code, I'm trying to use CDN code, referring to the servers for datatables.
Also may be it doesn't work because I'm using for loop to fill data for the table? But I think I saw the for loop somewhere in the tutorial for the datatables? What should I try, do extra or fix here? If I need to post extra code, please let me know. Thank you.
May be it has to be modified further? But in the manual it was said, that after setting up scripts the table should be initialized...

Answer 1

You just need to load jQuery as well, see this snippet:
<script src="https://code.jquery.com/jquery-3.5.1.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8"
src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.js"></script>
<table id='table_id' class="display">
<thead>
<tr>
<th>ref</th>
<th>ref_num</th>
<th>ref_pr</th>
</tr>
</thead>
<tbody>
<tr>
<td>ref1</td>
<td>ref_num1</td>
<td>2</td>
</tr>
<tr>
<td>ref2</td>
<td>ref_num2</td>
<td>1</td>
</tr>
</tbody>
</table>
<script>
$(document).ready( function () {
$('#table_id').dataTable();
} );
</script>