Question

我在Django中有一个数据表，在硬编码时功能很好，但是当我添加我的Django模板标签时，它会中断。页面上的检查显示：jquery.datatables.min.js中的Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined

只有在表中有多个用户或尝试使用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>元素的数量不匹配元素是元素的子元素。请确保您在<td>代码中使用相同数量的<tbody>代码。

修改

也许{％if not profile.user.is_superuser％}这种情况造成了这个问题。如果用户是超级用户，则不会创建与<td>
中的<th>相同数量的<thead>代码

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

1 个答案: