包含子行的表的数据表未加载
2019-07-08
281
我试图在我的 html 表中应用 jQuery Datatable 函数,该表在我的表的第二行包含另一个子表。
我在浏览器的控制台中收到以下错误:
Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined
当我没有填充任何数据的空表时,数据表工作正常,而当我上传数据时数据表无法正常工作。
我很困惑这是怎么回事?
{% 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 %}
当表中没有填充数据时的输出:正在应用数据表。 当我在表中填充数据时的输出:错误
Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined
2个回答
这是瞎猜的,但我认为这是因为缺少表头名称或表头与实际列数不匹配。
- 您是否尝试从表头和正文中删除不需要的列?
- 在表体(表单)中,尝试只保留第一行,不保留子行,然后检查错误是否仍然存在。
Ashwin Easo
2019-07-08
你不应该在 HTML 中嵌套行标签(内部)。这就是为什么你会得到与单元格和行数相关的意外错误的原因
Hicham O'Sfh
2021-05-14