Я пытаюсь применить функцию JQuery Datatable в моей html-таблице, которая содержит другую дочернюю таблицу во 2-й строке моей таблицы.
В консоли моего браузера появляется следующая ошибка:
Uncaught TypeError: Невозможно установить свойство '_DT_CellIndex' из неопределенного
Когда у меня не было данных, заполненных, таблица данных работала отлично, в то время как таблица данных не работала должным образом, когдаЯ загрузил в него данные.
Я не совсем понимаю, в чем дело?
{% extends 'base2.html' %}
{% load static %}
{% load tz humanize %}
{% timezone "Asia/Kolkata" %}
{% block content %}
<h2 class="align-left">Previous Dispatches</h2>
{% include 'classroom/teachers/dispatcher_header.html' with active='dispatches' %}
<div class="card">
<table class="table table-striped mb-0 dispatches" id="dispatcherhistory">
<thead>
<tr>
<th>ID</th>
<th>Vehicles</th>
<th>Gross Weight</th>
<th>Route</th>
<th>Route Distance</th>
<th>Route TAT</th>
<th>ETD</th>
{# <th></th>#}
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<form method="post" novalidate>
{% csrf_token %}
{% for plan in plan %}
<tr>
<td class="align-middle">{{ plan.comments }}</td>
<td class="align-middle">{{ plan.pk }}</td>
<td class="align-middle">{{ plan.truck_type }} {{ plan.truck_name }}</td>
<td class="align-middle">{{ plan.weight }}.00 KG</td>
<td class="align-middle">{{ plan.origin }}-{{ plan.destination }}</td>
<td class="align-middle">{{ plan.route_distance }} KM</td>
<td class="align-middle">{{ plan.route_tat }}</td>
<td class="align-middle">{{ plan.etd }}</td>
{# <td class="align-middle">{{ plan.eta }}</td>#}
<td class="align-middle">
<button class="btn" type="button" data-toggle="collapse"
data-target="#multiCollapse{{ plan.pk }}" aria-expanded="false"
aria-controls="multiCollapse{{ plan.pk }}"><img
src="{% static 'img/cardopen.svg' %}" alt="card open"></button>
</td>
<td class="align-middle"><a href=" {% url 'teachers:quiz_change' plan.pk %}"
class="btn btn-primary">Raise RFQ</a>
</td>
<tr class="collapse multi-collapse" id="multiCollapse{{ plan.pk }}">
<td colspan="5">
<table class="table table-bordered" id="rubin{{ plan.pk }}">
<thead>
<tr>
<td colspan="3">{{ plan.truck_name }}</td>
</tr>
<tr>
<th>SKU ID</th>
<th>SKU Name</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
{% for x in t_items %}
{% if forloop.counter == forloop.parentloop.counter %}
{% for j in ttt %}
{% if forloop.counter == forloop.parentloop.counter %}
{% for k in j %}
<button onclick="exportTableToCSV()">Download
Loading Plan
</button>
<tr>
<td>{{ k.pid }}</td>
<td>{{ k.name }}</td>
<td>{{ k.weight }}</td>
</tr>
{% endfor %}
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
</tbody>
</table>
</td>
<td colspan="5" class="align-middle">
<div class="card card-body iframecard">
<iframe src="{{ plan.route_link }}"></iframe>
</div>
</td>
</tr>
</tr>
<tr>
{% empty %}
{# <td class="bg-light text-center font-italic" colspan="7">You have no dispatch plans yet#}
{# </td>#}
{# </tr>#}
{% endfor %}
</form>
</tbody>
</table>
</div>
<script>
$(document).ready(function () {
$('#dispatcherhistory').DataTable({
"pagingType": "full_numbers",
"bDestroy": true
});
});
$('#dispatcherhistory tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
} else {
// Open this row
row.child(format(row.data())).show();
tr.addClass('shown');
}
});
</script>
{% endblock %}
{% endtimezone %}
Вывод, если в таблице нет данных: Datatable применяется.Вывод, когда я заполнил данные в таблице: Ошибка
Uncaught TypeError: Невозможно установить свойство '_DT_CellIndex' из неопределенного