Django, datatables doesn't render table in html template

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...

Yes, there is data. The html loads with a basic html table. Data comes from calculations, I just didn't post calculations, so not to overload the question with unnecessary calculations. Thank you. I will try to follow your solution... — bugthefifth
– bugthefifth, Commented Feb 6, 2021 at 9:56

Lajos Arpad · Accepted Answer · 2021-02-06 10:29:59Z

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>

edited Feb 6, 2021 at 10:29

answered Feb 6, 2021 at 9:46

Lajos Arpad

80.4k42 gold badges123 silver badges234 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

bugthefifth Over a year ago

I have a question... I see an integrity option in the script... Is this integrity option specifically relates to datatables, or is it a secret key for the project. I'm confused about it at this moment.

bugthefifth Over a year ago

Searching about this right now, I don't see any clear info... Seems like specifically for the datatables, because they all starting with "sha...", but everybody has different numbers... Where should I get this number or just use the number which is in the code snippet? Sorry for throwing extra questions, I just would like to understand completely... Thank you

Lajos Arpad Over a year ago

@bugthefifth it's just a code that proves that the cdn resource is without manipulation. Read more about it here: developer.mozilla.org/en-US/docs/Web/Security/…. However, you do not have to define it necessarily. To avoid confusion, I have edited my answer to remove that attribute. If this answer solved your problem, then you may consider accepting it as the correct answer.

bugthefifth Over a year ago

Yes, I will... I'm trying it right now... Thank you!

Collectives™ on Stack Overflow

Django, datatables doesn't render table in html template

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related