CODEWITHSUNDEEP
datatablesjquery-datatables-editor
Stephen
Stephen

Reputation: 313

DataTables not initializing properly

I am trying to use Datatables to create just a basic interactive table, but can't seem to get it up and running.

My headfile

My scripts file

{% load static %} 
 
...
<!-- Datatables -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.6.0/dt-1.11.3/datatables.min.js"></script>
 
 <script>
   $(document).ready( function () {
    $('#table_id').DataTable();
} );
  </script>

My Base template

<!DOCTYPE html>
<html>
{% include 'head.html' %}
<body>
{% include 'navbar.html' %}
<div class="page">   
{% include 'header.html' %}   

{% block content %}
{% endblock content %}
{% include 'footer.html' %}
</div>


{% include 'scripts.html' %}
</body>
</html>

the table itself

  <table id="table_id" class="display table text-sm mb-0">
                      <thead>
                        <tr>
                          <th>#</th>
                          <th>Project</th>
                          <th>Title</th>
                          <th>Description</th>
                          <th>Due Date</th>
                          <th>Priority</th>
                          <th>status</th>
                          <th>Assigned_to</th>
                        </tr>
                      </thead>
                      <tbody>
                        {% for ticket in tickets %}
                        <tr>
                          <th scope="row">{{ ticket.id }}</th>
                          <td>{{ ticket.project }}</td>
                          <td><a class="btn btn-primary" href="{% url 'bugtracker:ticket' ticket.id %} " role="button">{{ ticket.title }}</a></td>
                          <td>{{ ticket.description_short }}</td>
                          <td>{{ ticket.due_date }}</td>
                          <td>{{ ticket.priority }}</td>
                          <td>{{ ticket.status }}</td>
                          <td>{{ ticket.assigned_to }}</td>
                          <td><a class="btn btn-info" href="{% url 'bugtracker:edit_ticket' ticket.id %}" role="button">Edit</a></td>
                          <td><a class="btn btn-danger" href="{% url 'bugtracker:delete_ticket' ticket.id %}" role="button">Delete</a></td>
                        </tr>
                        {% endfor %}
                      </tbody>
                    </table>

The head.html file:

{% load static %}
<head>
  ...
    <!-- Datatables -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.6.0/dt-1.11.3/datatables.min.css"/>

  </head>

Do you see anything wrong with my set up? I'm confused because I'm not getting any error messages. I'm just not seeing the interactive table that should be appearing as per the documentation.

Upvotes: 0

Views: 1190

Answers (1)

Samex99
Samex99

Reputation: 1

I found that if you don't respect any of a "perfect table" ruler, datatable won't initialize.

Reading your code i've found that in you've put 10 columns, instead of 8 columns you've put on . Try to put the same amount of columns.

These can cause the problem. In my case it works fixing these imperfections. Let me know if it works.

Upvotes: 0

Related Questions