在 Django 中添加行会破坏数据表

Question

我在 Django 中有一个数据表，在硬编码时可以正常工作，但是当我添加我的 Django 模板标签时它会中断。页面上的检查说：Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined in jquery.datatables.min.js

只有当我在表中有多个用户时才会发生这种情况，或者尝试使用 django 在表中添加一列。因为我将在我的项目中使用多个数据表，所以我需要弄清楚我做错了什么。我使用的数据表 JS 代码来自模板，我不确定错误是在模板代码中还是在我的 Django 模板代码中。所以请原谅长代码块。

employees.html（django 模板）：

<div class="card-body collapse in">
                    <div class="card-block card-dashboard">
                        <button id="addRow" class="btn btn-primary mb-2 js-create-employee"><i class="ft-plus"></i>&nbsp; Add New Employee</button>
                        <table class="table table-striped table-bordered zero-configuration">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Username</th>
                                    <th>Roles</th>
                                    <th>Email</th>
                                    <th>Mobile Contact</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>

                                {% for profile in user_profile_list %}
                                    <tr>
                                    {% if not profile.user.is_superuser %}
                                        <td><a href="{% url 'dispatch:profile_detail' pk=profile.user_id %}">{{ profile.user.get_full_name }}</a></td>
                                        <td>{{ profile.user.username }}</td>
                                        <td>
                                            {% for g in profile.user.groups.all %}
                                               <div class="tag tag-default">{{ g.name|split:'_'|title }}</div>
                                            {% endfor %}
                                        </td>
                                        <td>{{ profile.user.email }}</td>
                                        <td>{{ profile.mobile_phone }}</td>
                                        <td><a href="#" alt="Edit"><i class="fa fa-pencil"></i></a>&nbsp;&nbsp;<a href="#" alt="Assign"><i class="fa fa-link"></i><a/>&nbsp;&nbsp;<a href="#" alt="delete"><i class="fa fa-times"></i><a/></td>

                                        {% endif %}
                                    </tr>
                                    {% endfor %}
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>Name</th>
                                    <th>Username</th>
                                    <th>Roles</th>
                                    <th>Email</th>
                                    <th>Mobile Contact</th>
                                    <th>Actions</th>
                                </tr>
                            </tfoot>
                        </table>

数据表实例化：

$(document).ready(function() {

/****************************************
*       js of zero configuration        *
****************************************/

$('.zero-configuration').DataTable();
});

也使用了 Jquery.datatables.min.js 和 dataTables.bootstrap4.min.js，但它们来自 bootstrap 4。除非需要，否则我不会在此处添加它们，无论如何它们都会被缩小。

Answer 1

仅当表格或标签的数据不可用时才会出现此问题。

您在使用 django templatestag 的模板中有条件因此，表中每个 <td> 元素的数量是 <tr> 元素的子元素的数量与 <th> 元素的数量不匹配元素。 请确保<tbody>标签中的<td>标签数量相同。

编辑：

也许 {% if not profile.user.is_superuser %} 这个条件造成了这个问题。如果用户是超级用户，则不会创建与 <thead> 中相同数量的 <th> 不匹配的 <td> 标签