Блог

Главная - Вопросы по программированию - Таблицы данных не инициализируются должным образом

Таблицы данных не инициализируются должным образом

#datatables #jquery-datatables-editor

#таблицы данных #jquery-datatables-редактор

Вопрос:

Я пытаюсь использовать таблицы данных для создания простой интерактивной таблицы, но, похоже, не могу запустить ее и запустить.

Мой головной файл

Мой файл скриптов

 {% 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>

Мой базовый шаблон

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

сама таблица

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

head.html файл:

 {% 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>

Вы видите что-то не так в моей настройке? Я в замешательстве, потому что я не получаю никаких сообщений об ошибках. Я просто не вижу интерактивную таблицу, которая должна отображаться в соответствии с документацией.

Комментарии:

1. Вы не видите ошибок в консоли браузера (F11 для открытия)? Я ожидал бы увидеть что-то в консоли браузера, потому что в вашей таблице 8 <th> заголовков столбцов, но в ней 10 основных ячеек в строке (один <th> элемент и 9 <td> элементов). Это несоответствие само по себе выглядит достаточным, чтобы вызвать проблему для таблиц данных (возможно, за этим скрываются дополнительные проблемы).

2. Нам может помочь, если вы включите сгенерированный HTML-код в вопрос, если приведенные выше примечания вам не помогут.

3. Вот и все! Большое спасибо за помощь 🙂

Метки: