The "Else if" statement in my Django templates appears after the HTML header block

Viewed 369

I have some data which I am passing from my views to my templates, whenever the else if the statement is true(that is the if the statement is false) the statement appears after my HTML header().

My main issue is that why is the else block not under the HTML heaader where I have put it in the code

This is a visual representation of the problem

templates.html

<table class="table table-borderless table-data3">
    <thead>
        <tr>
            <th>No</th>
            <th>Email</th>
            <th>Telephone</th>
            <th>Country</th>
            <th>Status</th>
            <th>Image</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        {% if supplier %}
        {% for supplier in suppliers %}
        <tr>
            <td>{{forloop.counter}}</td>
            <td>{{supplier.email}}</td>
            <td>{{supplier.telephone}}</td>
            <td>{{supplier.country}}</td>
            <td class="process">Active</td>
            <td>{{supplier.image.url}}</td>
            <td>
                <div class="table-data-feature">
                    <button class="item" data-toggle="tooltip" data-placement="top" title="Edit">
                        <i class="zmdi zmdi-edit"></i>
                    </button>
                    <button class="item" data-toggle="tooltip" data-placement="top" title="Delete">
                        <i class="zmdi zmdi-delete"></i>
                    </button>
                </div>
            </td>
        </tr>
        {% endfor %}
        {% else %}
            <h2>No supplier available</h2>
        {% endif %}
    </tbody>
</table>
2 Answers

You can not write a h2 in <tbody> or at least not directly. Yolu write this wrapped in a <tr> and <td>:

{% if suppliers %}
    …
{% else %}
    <tr><td colspan="7">No supplier available</td></tr>
{% endif %}

You also made a typo in the if statement: it is suppliers, not supplier.


Note: Django has a {% for … %}…{% empty %} template tag [Django-doc] that can be used to render a message if the collection you iterate over is empty.

You can use the {% for … %}…{% empty %} django template tag. Example:

HTML

        {% for supplier in suppliers %}
        <tr>
            <td>{{forloop.counter}}</td>
            <td>{{supplier.email}}</td>
            <td>{{supplier.telephone}}</td>
            <td>{{supplier.country}}</td>
            <td class="process">Active</td>
            <td>{{supplier.image.url}}</td>
            <td>
                <div class="table-data-feature">
                    <button class="item" data-toggle="tooltip" data-placement="top" title="Edit">
                        <i class="zmdi zmdi-edit"></i>
                    </button>
                    <button class="item" data-toggle="tooltip" data-placement="top" title="Delete">
                        <i class="zmdi zmdi-delete"></i>
                    </button>
                </div>
            </td>
        </tr>
        {% empty %}
             <div><h2>No Suppliers Available</h2></div>
        {% endfor %}
Related