Djangoで行を追加するとデータテーブルが破損する

Question

Djangoでデータテーブルを作成すると、ハードコードされたときに正常に機能しますが、Djangoテンプレートタグを追加すると破損します。ページの検査では、Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefinedのjquery.datatables.min.jsにあります。

これは、私がテーブルに複数のユーザーがいる場合、またはdjangoでテーブルに列を追加しようとした場合にのみ発生します。私は自分のプロジェクトで複数のデータセットを使用するので、私が間違っていることを理解する必要があります。私が使用しているdatatable 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も使用されるが、それらブートストラップ4から在庫が来ます。私は必要がない限り、ここにそれらを追加するつもりはなく、とにかくミニチュア化されています。

Answer 1

この問題は、データがテーブルまたはタグで使用できない場合にのみ発生します。

あなたは<tr>要素の子で、テーブル内のすべての<td>の要素の数は、要素の子です<th>要素の数が一致しないようにDjangoのtemplatestagを使用して、テンプレート内の条件を持っています。 タグの番号が<tbody>タグであることを確認してください。

EDIT：

多分{％％をprofile.user.is_superuserない場合}この問題を作成し、この条件を。ユーザーがスーパーユーザーの場合、<th>と一致しない<td>タグが作成されます。<thead>