在Django中添加行中断数据表

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

这只有当我在表中的多个用户，或试图在表中添加一列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>

DATATABLE实例：

$(document).ready(function() { 

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

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

Jquery.datatables.min.js和dataTables.bootstrap4.min.js也被使用，但这些来自bootstrap的股票4.我不会在这里添加它们，除非需要，无论如何它们都被缩小了。

来源

2017-06-16 Justin Boucher

仅当数据不适用于表或标签时才会出现此问题。

您使用Django templatestag所以这是一个<tr>元素的孩子在你的表中的每个元素<td>的数量不匹配<th>元素是元素的孩子的数量在模板的条件。请确保您在<tbody>标记中有相同数量的<td>标记。

编辑：

也许{％如果不profile.user.is_superuser％}这种情况下创建这个问题。如果用户是超级用户则没有<td>标签将创建不<thead>

来源

2017-06-16 18:31:56

匹配相同数量的<th>我明白，但数据是为每个用户相同。那么为什么它有问题？ –

如果用户是超级用户，则{％if not profile.user.is_superuser％}此情况可能会导致此问题。将不会与 –

超级用户代码的作品，如果我只有一个额外的用户。当我向用户添加第二个非超级用户时，表中断 –

在Django中添加行中断数据表

回答

相关问题