javascript - 未为包含子行的表加载数据表

Question

我正在尝试在我的 html 表中应用 jQuery Datatable 函数，该表在我的表的第二行中包含另一个子表。

我在浏览器的控制台中收到以下错误：

未捕获的类型错误：无法设置未定义的属性“_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 %}    

表中无数据时输出：正在应用数据表。当我在表格中填写数据时输出：错误

未捕获的类型错误：无法设置未定义的属性“_DT_CellIndex”

标签： javascriptjquerydjangodatatable

Answer 1

这是在黑暗中拍摄的，但我认为这是因为缺少表头名称或表头与实际列数不匹配。

1. 您会尝试从标题和正文中删除不需要的列吗？
2. 在表体（表单）中，尝试只保留第一行，不保留子行，并检查错误是否仍然存在。