jquery datatable исчезает при отсутствии данных

Question

В моем приложении django я использую таблицу данных в своем шаблоне django для загрузки данных в 4 форматах, таких как CSV, Excel, PDF или просто копирование, но когда отсутствуют данные даже в одном столбце / строке, таблица данных исчезает. Вот код:

HTML

{% extends 'base.html' %}

{% block content %}

<div class="card">
    <table class="table mb-0" id="table_id">
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
        <thead>
         <th>Owner</th>
            <th>Flow</th>
            <th>Kit</th>
            <th>Plastic Pallets</th>
            <th>Plastic Pallets</th>
            <th>Side Wall</th>
            <th>Side Wall</th>
            <th>Top Lid</th>
            <th>Top Lid</th>
            <th>Insert</th>
            <th>Insert</th>
            <th>Separator Sheets</th>
            <th>Separator Sheets</th>
            <th>Created On</th>
            <th>Delivery Required on</th>


            <th>Allotment ID</th>
            <th>Dispatch Date</th>
            <th>Sent From Warehouse</th>
            <th>Parent Company</th>
            <th>Sales Order</th>
            <th>Plastic Pallets</th>
            <th>Side Wall</th>
            <th>Top Lid</th>
            <th>Insert</th>
            <th>Separator Sheets</th>
            <th>Transporter Name</th>
            <th>Driver Name</th>
            <th>LR Number</th>
            <th>Vehicle Type</th>
            <th>Expected Delivery</th>


        </tr>
        </thead>
        <tbody>
        {% for i in query %}
        <tr>


            <td class="align-middle">{{ i.owner }}</td>
            <td class="align-middle">{{ i.flow }}</td>
            <td class="align-middle">{{ i.kit }}</td>
            <td class="align-middle">{{ i.plastic_pallet }}</td>
            <td class="align-middle">{{ i.kit.product1 }}</td>
            <td class="align-middle">{{ i.side_wall }}</td>
            <td class="align-middle">{{ i.kit.product2 }}</td>
            <td class="align-middle">{{ i.top_lid }}</td>
            <td class="align-middle">{{ i.kit.product3 }}</td>
            <td class="align-middle">{{ i.insert }}</td>
            <td class="align-middle">{{ i.kit.product4 }}</td>
            <td class="align-middle">{{ i.separator_sheet }}</td>
            <td class="align-middle">{{ i.kit.product5 }}</td>
            <td class="align-middle">{{ i.created_on }}</td>
            <td class="align-middle">{{ i.delivery_required_on }}</td>
            {% for bar in i.allotment_sales.all %}
            <td class="align-middle">{{ bar.pk }}</td>
            <td class="align-middle">{{ bar.dispatch_date }}</td>
            <td class="align-middle">{{ bar.send_from_warehouse }}</td>
            <td class="align-middle">{{ bar.parent_company }}</td>
            <td class="align-middle">{{ bar.sales_order }}</td>
            <td class="align-middle">{{ bar.plastic_pallet }}</td>
            <td class="align-middle">{{ bar.side_wall }}</td>
            <td class="align-middle">{{ bar.top_lid }}</td>
            <td class="align-middle">{{ bar.insert }}</td>
            <td class="align-middle">{{ bar.separator_sheet }}</td>
            <td class="align-middle">{{ bar.transporter_name }}</td>
            <td class="align-middle">{{ bar.driver_name }}</td>
            <td class="align-middle">{{ bar.lr_number }}</td>
            <td class="align-middle">{{ bar.vehicle_type }}</td>
            <td class="align-middle">{{ bar.expected_delivery }}</td>

            {% endfor %}




        </tr>
        {% empty %}
        <tr>
            <td class="bg-light text-center font-italic" colspan="5">You haven't created any product yet.</td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
    <script type="text/javascript" charset="utf8"
            src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>

</div>


{% endblock %}
{% block js %}
<link rel="stylesheet" type="text/css"
      href="https://cdn.datatables.net/v/dt/jq-3.3.1/jszip-2.5.0/dt-1.10.18/af-2.3.3/b-1.5.6/b-colvis-1.5.6/b-flash-1.5.6/b-html5-1.5.6/b-print-1.5.6/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/rr-1.2.4/sc-2.0.0/sl-1.3.0/datatables.min.css"/>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript"
        src="https://cdn.datatables.net/v/dt/jq-3.3.1/jszip-2.5.0/dt-1.10.18/af-2.3.3/b-1.5.6/b-colvis-1.5.6/b-flash-1.5.6/b-html5-1.5.6/b-print-1.5.6/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/rr-1.2.4/sc-2.0.0/sl-1.3.0/datatables.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css"
      href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.18/af-2.3.0/b-1.5.2/b-colvis-1.5.2/b-flash-1.5.2/b-html5-1.5.2/b-print-1.5.2/cr-1.5.0/fh-3.1.4/r-2.2.2/datatables.min.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript"
        src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.18/af-2.3.0/b-1.5.2/b-colvis-1.5.2/b-flash-1.5.2/b-html5-1.5.2/b-print-1.5.2/cr-1.5.0/fh-3.1.4/r-2.2.2/datatables.min.js"></script>
<script>
    $(document).ready(function () {
        $('#table_id').DataTable({
                dom: 'B<"clear">lfrtip',
                buttons: {
                    name: 'primary',
                    buttons: ['copy', 'csv', 'excel', 'pdf']
                }
            }
        );
    });
</script>
{% endblock %}

Что является причиной этого исчезновения? Как я могу это изменить? Если нет, я могу заполнить пустой столбец / строки значением '0'?

Изображение для лучшего понимания:

Answer 1

Вам необходимо создать пустые td s, когда нет значения для повторения во втором цикле в TR.

см. Ниже

{% for i in query %}
        <tr>
            <td class="align-middle">{{ i.owner }}</td>
            <td class="align-middle">{{ i.flow }}</td>
            <td class="align-middle">{{ i.kit }}</td>
            <td class="align-middle">{{ i.plastic_pallet }}</td>
            <td class="align-middle">{{ i.kit.product1 }}</td>
            <td class="align-middle">{{ i.side_wall }}</td>
            <td class="align-middle">{{ i.kit.product2 }}</td>
            <td class="align-middle">{{ i.top_lid }}</td>
            <td class="align-middle">{{ i.kit.product3 }}</td>
            <td class="align-middle">{{ i.insert }}</td>
            <td class="align-middle">{{ i.kit.product4 }}</td>
            <td class="align-middle">{{ i.separator_sheet }}</td>
            <td class="align-middle">{{ i.kit.product5 }}</td>
            <td class="align-middle">{{ i.created_on }}</td>
            <td class="align-middle">{{ i.delivery_required_on }}</td>
            {% if i.allotment_sales.all %}
                {% for bar in i.allotment_sales.all %}
                    <td class="align-middle">{{ bar.pk }}</td>
                    <td class="align-middle">{{ bar.dispatch_date }}</td>
                    <td class="align-middle">{{ bar.send_from_warehouse }}</td>
                    <td class="align-middle">{{ bar.parent_company }}</td>
                    <td class="align-middle">{{ bar.sales_order }}</td>
                    <td class="align-middle">{{ bar.plastic_pallet }}</td>
                    <td class="align-middle">{{ bar.side_wall }}</td>
                    <td class="align-middle">{{ bar.top_lid }}</td>
                    <td class="align-middle">{{ bar.insert }}</td>
                    <td class="align-middle">{{ bar.separator_sheet }}</td>
                    <td class="align-middle">{{ bar.transporter_name }}</td>
                    <td class="align-middle">{{ bar.driver_name }}</td>
                    <td class="align-middle">{{ bar.lr_number }}</td>
                    <td class="align-middle">{{ bar.vehicle_type }}</td>
                    <td class="align-middle">{{ bar.expected_delivery }}</td>
                {% endfor %}
            {% else %}
                <td class="align-middle"></td>
                <td class="align-middle"></td>
                <td class="align-middle"></td>
                <td class="align-middle"></td>
                <td class="align-middle"></td>
                <td class="align-middle"></td>
                <td class="align-middle"></td>
                <td class="align-middle"></td>
                <td class="align-middle"></td>
                <td class="align-middle"></td>
                <td class="align-middle"></td>
                <td class="align-middle"></td>
                <td class="align-middle"></td>
                <td class="align-middle"></td>
                <td class="align-middle"></td>  
            {% endif %}
        </tr>
 {% empty %}