Datatable不顯示所有表列

Question

我有一個非常奇怪的Bahaviour與圖書館DataTable。

我有一個經典的表格構建14個元素的循環。當顯示正常時，一切都會出現，當我將它製作成DataTable時，最後4列消失。

我的代碼，其中地平線的值爲14（測試），並且只顯示了環的10列（如果我刪除DataTable類顯示的所有內容）：

<table id="ingredients_table" class="table DataTable"> 
    <thead> 
     <tr> 
      <th>Produit</th> 
      <th>Marque</th> 
      <th title="Quantité disponible dans un produit" data-toggle="tooltip" data-placement="top">Packaging</th> 
      <th title="Unité de gestion des stocks" data-toggle="tooltip" data-placement="top">UGS</th> 
      <th>Stock min</th> 
      <th>Stock actuel</th> 
      <th class="text-right">J+</th> 
      {% for i in 1..horizon %} 
       <th>{{ i }}</th> 
      {% endfor %} 
     </tr> 
    </thead> 
    <tbody> 
    {% spaceless %} 
     {% for ingredient in ingredients -%} 
      <tr data-table_form_id="{{ ingredient.id }}" data-id="{{ ingredient.id }}" data-repo="AppBundle:FoodAnalytics\UserIngredient"> 
       <td>{{ ingredient.getInferredName }}</td> 
       <td>{{ ingredient.getProductBrand }}</td> 
       <td>{{ ingredient.getProductPackaging }}</td> 
       <td style="min-width: 100px !important;" data-table_form_value="{{ ingredient.unit.id }}"> 
        {{ ingredient.unit }} 
       </td> 
       <td style="min-width: 70px !important;"> 
        {{ ingredient.stockMini | round_quantity }} 
       </td> 
       <td style="min-width: 70px !important;"> 
        {{ ingredient.getLastNumberObjectValue() }} 
       </td> 
       <td><span class="sparkline" data-id="{{ ingredient.id }}"></span></td> 
       {% for i in 1..horizon %} 
        {% if stocks[ingredient.id][i] < 0 %} 
         {% set class = 'text-danger' %} 
        {% elseif stocks[ingredient.id][i] < ingredient.stockMini %} 
         {% set class = 'text-warning' %} 
        {% endif %} 
        <td{% if class is defined %} class="{{ class }}"{% endif %}> 
         {{ stocks[ingredient.id][i]|round_quantity }} 
        </td> 
       {% endfor %} 
      </tr> 
     {% endfor %} 
    {% endspaceless %} 
    </tbody> 
    <tfoot> 
    <tr> 
     <th>Produit</th> 
     <th>Marque</th> 
     <th title="Quantité disponible dans un produit" data-toggle="tooltip" data-placement="top">Packaging</th> 
     <th title="Unité de gestion des stocks" data-toggle="tooltip" data-placement="top">UGS</th> 
     <th>Stock min</th> 
     <th>Stock actuel</th> 
     <th class="text-right">J+</th> 
     {% for i in 1..horizon %} 
      <th>{{ i }}</th> 
     {% endfor %} 
    </tr> 
    </tfoot> 
</table> 

$('.DataTable').DataTable({iDisplayLength: 50, responsive: true}); 

是否有人有什麼不對的想法？

Answer 1

試試這個：

$(document).ready(function(){ 
$('.DataTable').DataTable({iDisplayLength: 50, responsive: true}); 
});