CODEWITHSUNDEEP
htmldjangohtml-table
anc1revv
anc1revv

Reputation: 1623

HTML table formatting with django

I'm creating an e-commerce website and I wanted to build a page where I could view a list of all the orders created.

If the order contains just 1 type of item, the format works correctly, but i can't think of a way to construct the table when there are multiple types of items ordered.

This is how it looks like when there are 2 items ordered (last entry):

enter image description here

I want the "Queso Burrito" to be right under "steak and egg burrito" for #18.

This is my code:

<table>
    <tr>
        <td>#</td>
        <td>Name</td>
        <td>Email</td>
        <td>Phone</td>
        <td>Order</td>
        <td>Order Quantity</td>
        <td>Delivered</td>
    </tr>

    {% for ord in orders %}
    <tr>
        <td>{{ord.pk}}</td>
        <td>{{ord.user.first_name}}</td>
        <td>{{ord.user.email}}</td>
        <td>{{ord.user.get_profile.phone}}</td>

        {% for food in ord.orderitem_set.all %}
            <td>{{food.name}}</td>
            <td>{{food.quantity}}</td>
        {% endfor %}

        <td>x</td>
    </tr>
    {% endfor %}

</table>

Upvotes: 0

Views: 231

Answers (1)

Yuji &#39;Tomita&#39; Tomita
Yuji &#39;Tomita&#39; Tomita

Reputation: 118538

With multiple items, you typically see tables with order data repeated for each line item.

{% for order in orders %}
{% for orderitem in order.items %}
<td>{{order.id}}</td><td>...</td>
{% endfor %}
{% endfor %}

If you want exactly the formatting you described, you could check if the inner loop is past its first item and hide the fields you don't want repeated.

<table>
    {% for ord in orders %}
        {% for item in ord.orderitem_set.all %}
        <tr> 
            {% if forloop.counter == 1 %}
                <td>{{ord.pk}}</td>
                <td>{{ord.user.first_name}}</td>
                <td>{{ord.user.email}}</td>
                <td>{{ord.user.get_profile.phone}}</td>
            {% else %}
                <td colspan="4"></td>
            {% endif %}
            <td>{{item.name}}</td>
            <td>{{item.quantity}}</td>
            <td>{% if forloop.counter == 1 %}x{% endif %}</td>
        </tr>
        {% endfor %}
    {% endfor %}

</table>

Upvotes: 2

Related Questions