creating custom table in django template using forloop

Question

I need to create a custom table in django template as below:

    <table>
    <tr>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
    </tr>
</table>

i.e I want to add new tr tag after every 3 td tags. I tried applying logic using {{forloop.counter|divisibleby:4}}. I tried something like below but it didn't generated desired results.

{% for items in range(5) %}
    {% if forloop.counter ==1 or forloop.counter|divisibleby:4 %}\
    <tr>
    {% endif %}
    <td>name</td>

    {% if forloop.counter|divisibleby:4 %}
        </tr>
    {% endif %}
    </tr>
{% endfor %}

but it is obviously not correct solution. Update: It is generating something like below: Where each image is td tag

can you add a screenshot of what the output currently looks like and do a manual mockup of what you want it to look like. This will help me see what you are trying to achieve — nkhumphreys
– nkhumphreys, Commented Aug 9, 2016 at 13:40
I have mention it as my object contain 5 elements. So for generalization I mention range(5) this will run for loop for 5 times. — Always_a_learner
– Always_a_learner, Commented Aug 9, 2016 at 13:59

Fabio · Accepted Answer · 2016-08-09 14:31:20Z

2

This part is not evaluating to true for the correct numbers:

{% if forloop.counter ==1 or forloop.counter|divisibleby:4 %}

This is gonna evaluate to true when counter is 1, 4, 8, 12, etc. Not every 3 numbers, but every four numbers. Instead, use forloop.counter0, like so:

{% if forloop.counter0|divisibleby:3 %}

forloop.counter0 starts at 0, so it's gonna be divisible by 3 at 0, 3, 6, 9, etc just like you want.

There is another problem with your code here:

{% if forloop.counter|divisibleby:4 %}
    </tr>
{% endif %}
</tr>

If you only want the tag to be closed after every third element, then remove the one outside the if condition. Also, you're adding the closing tag in the wrong parts. It's supposed to be one element before you open the tag again, so at the 3rd element, 6th element, etc. For this you can still use the forloop.counter like so:

{% if forloop.counter|divisibleby:3 %}
    </tr>
{% endif %}

overall, your code should look like this:

{% for items in range(5) %}
    {% if forloop.counter0|divisibleby:3 %}
        <tr>
    {% endif %}
    <td>name</td>
    {% if forloop.counter|divisibleby:3 %}
        </tr>
    {% endif %}
{% endfor %}
</tr>

If you're using an unknown nbr number of items instead of 5, just substitute the </tr> tag outside the forloop for

{% if not nbr|divisibleby:3 %}
    </tr>
{% endif %}

so that you won't have two </tr>s if one was added at the last iteration of the for loop.

edited Aug 9, 2016 at 14:31

answered Aug 9, 2016 at 14:12

Fabio

3,0672 gold badges34 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Fabio Over a year ago

@Simer I added a note in the end for if you're using a variable number of items

Always_a_learner Over a year ago

what is 'nbr' in your solution?

Fabio Over a year ago

@Simer total number of items. So if you're using {% for items in range(nbr) %} then use that piece in the end, instead of just </tr>. or if you're using {% for items in my_queryset %} instead of range, just substitute nbr for my_queryset.count

Always_a_learner Over a year ago

Thanks for such a great answer.

nkhumphreys · Accepted Answer · 2016-08-09 14:14:04Z

1

So this is because you are inserting <tr> AND </tr> if the forloop counter is divisible by 4. You are also inserting <tr> if the forloop counter is 1. So the first row works, the second row will insert the opening and closing tags (because the forloop counter is still divisible by 4). Your logic is off.

I think you want:

<table> {% for items in range(5) %} {% if forloop.counter == 1 %} <tr> {% endif %} <td>name</td> {% if forloop.counter|divisibleby:4 %} </tr><tr> {% endif %} {% endfor %} </tr> </table>

answered Aug 9, 2016 at 14:14

nkhumphreys

9968 silver badges12 bronze badges

6 Comments

Always_a_learner Over a year ago

Thank you for your solution @nkhumphreys. I will try this one also. For now I have selected solution of dietbacon as it seems bit simpler and optimized. thanks for your efforts.

nkhumphreys Over a year ago

Yeh dietbacon's solution is good. I don't think it particularly matters whether you start your index at 1 or 0. I am purist so prefer to start at 0 but I did not want to confuse the answer. The important thing is to get the logic for where to insert the tags correct

Fabio Over a year ago

@nkhumphreys This solution is ok. It works fine for 5 items, but it breaks if you have more than 7 items, as it's gonna start dividing the items 4 by 4.

nkhumphreys Over a year ago

correct, but you you change the second if statement to divisibleby:3 then this solution works fine even with an index starting from 1

Fabio Over a year ago

Looking closer now, won't it have 4 items even in the first row instead of 3? <tr> will close when counter is 4, so you're gonna have the item 4 times before closing for the first time. If you change it to divisibleby:3 then it works, but you'll have an empty row in the end if the total number of items is divisible by 3.

|

Collectives™ on Stack Overflow

creating custom table in django template using forloop

2 Answers 2

4 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related