数据表不显示所有表列

Question

我对 DataTable 库有一个非常奇怪的行为。

我有一个包含 14 个元素的循环的经典表格。正常显示时，一切都会出现，当我将其设为 DataTable 时，最后 4 列消失。

我的代码中，horizo​​n 的值为 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});
});