Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

django template to populate bootstrap rows and columns

So here's my problem: I've got a bunch of instances of a class. I would like to have a sort of table of these instance objects, so that there is a maximum of six in every row. In bootstrap terms, I would like each object to be represented by a thumbnail in a "div" of class "span2".

My initial impulse was to use a nested for loop, but I am having trouble manipulating my index variable in the template, and I can't figure out how to do so outside of my template.

Here is generally what the python/django template/pseudo code is I'm trying to figure out.

queryset = Class.objects.all()
set_length = queryset.count()

num_rows = set_length/6 
#because I want 6 columns in each row, each with one instance

set_as_list = list(queryset) 
# have a list so I can iterate through objects by index

for i in range(table_rows):
    # make a row
    <div class="row">
    for j in range (i*6,(i+1)*6):
        #make six or less columns
        <div class="span2">
           <p>set_as_list[j].attribute1</p>
           <p>set_as_list[j].attribute2</p>
        </div>
    </div> # end row

I hope this flagrant mixing of django templating language, python, and html doesn't offend anybody too badly. just trying to express the idea of what I'm trying to do. I would appreciate any help someone may be willing to offer because I've been struggling with this for days and have done quite a bit of searching for a solution both within a template and outside.

I also realise that there will be need to be a final row with the remainder of objects after the integer division.

like image 338
sinwav Avatar asked Dec 01 '13 06:12

sinwav


2 Answers

Have no time to explain, but I've had similar problem and until i closed this browser page here is a solution

{% for sub_article in articles %}
    {% if forloop.first %}<div class="row">{% endif %}
    <div class="col-xs-4">
            <a href="#">
                {{ sub_article.name }}
            </a>
        </div>
    {% if forloop.counter|divisibleby:3 %}</div><div class="row">{% endif %}
    {% if forloop.last %}</div>{% endif %}
{% endfor %}
like image 158
Mark Avatar answered Oct 17 '22 02:10

Mark


Since forloop.counter starts the index with 1, divisibleby 3 does not work. So use forloop.counter0 instead.

<div class="row">
{% for product in all_products %}
    {% if forloop.counter0|divisibleby:3 %}
        </div><br><div class="row">
    {% endif %}
        <div class="col-4"></div>
{% endfor %}
like image 3
Sharpless512 Avatar answered Oct 17 '22 02:10

Sharpless512