CODEWITHSUNDEEP
htmlcssdjangodjango-templates
user514310
user514310

Reputation:

Regarding for loop (template for loop)

I have four <div> in one page. I want to display 25 records on each <div>. I have written messy code. and its not working. Will you please help me ? thanks 

    <div one >  <div two>   <div three> <div four>
1               26          51          76
2               27          52          77
3               28          53          78
-               -           -           -
-               -           -           -
25              50          75          100
</div>        </div>     </div>     </div>

here is template code.

 <div class="fourcolumnswrapper">
      <div class="moviescolumn">
     {% for movie in movies.object_list %}
    <a href="{{ movie.get_absolute_url}}">{{ movie.title }}</a><br/>
    <!-- Display first 25 record in one div -->
    {% if forloop.counter == 25 %}

        </div>
        {% endif %}
    {% if forloop.counter > 25 and forloop.counter <= 50 %}
        <div class="moviescolumn">

        {% if forloop.counter == 50 %}
            </div>
        {% endif %} 
    {% endif %}
    {% if forloop.counter > 50 and forloop.counter < 75 %}
        <div class="moviescolumn">

        {% if forloop.counter == 75 %}
            </div>
        {% endif %} 
    {% endif %}
     {% endfor %}


    </div>

Update Output: http://i.imgur.com/zuc8y.png Here is source code generated by view source . http://dpaste.org/dxKi8/

Upvotes: 1

Views: 3917

Answers (3)

no_freedom
no_freedom

Reputation: 1961

You doing wrong. Try this

<div class="moviescolumn">

    {% for movie in movies.object_list %}
<a href="{{ movie.get_absolute_url}}">{{ movie.title }}</a><br/>
<!-- Display first 25 record in one div -->
{% if forloop.counter == 25 %}
<!-- Paginator-->
<!-- End Paginator -->
</div>
<div class="moviescolumn">
{% endif %}
{% if forloop.counter == 50 %}
</div>
<div class="moviescolumn">
{% endif %}
{% if forloop.counter == 75 and forloop.counter < 100 %}
</div>
{% endif %}
{% endfor %}

Upvotes: 0

kͩeͣmͮpͥ ͩ
kͩeͣmͮpͥ ͩ

Reputation: 7856

Why are you using DIVs for tabular data? There's a perfectly good TABLE element for that.

Upvotes: 2

Grzegorz Rożniecki
Grzegorz Rożniecki

Reputation: 28045

You probably want something like this on output:

<div class="fourcolumnswrapper">
  <div class="moviescolumn">
    <a href="movie_link.html">Movie title here 1</a><br />
    <a href="movie_link.html">Movie title here 2</a><br />
    <a href="movie_link.html">Movie title here 3</a><br />
    <a href="movie_link.html">Movie title here 4</a><br />
    <a href="movie_link.html">Movie title here 5</a><br />
  </div>
  <div class="moviescolumn">
    <a href="movie_link.html">Movie title here 6</a><br />
    <a href="movie_link.html">Movie title here 7</a><br />
    <a href="movie_link.html">Movie title here 8</a><br />
    <a href="movie_link.html">Movie title here 9</a><br />
    <a href="movie_link.html">Movie title here 10</a><br />
  </div>
  <div class="moviescolumn">
    <a href="movie_link.html">Movie title here 11</a><br />
    <a href="movie_link.html">Movie title here 12</a><br />
    <a href="movie_link.html">Movie title here 13</a><br />
    <a href="movie_link.html">Movie title here 14</a><br />
    <a href="movie_link.html">Movie title here 15</a><br />
  </div>
  <div class="moviescolumn">
    <a href="movie_link.html">Movie title here 16</a><br />
    <a href="movie_link.html">Movie title here 17</a><br />
    <a href="movie_link.html">Movie title here 18</a><br />
    <a href="movie_link.html">Movie title here 19</a><br />
    <a href="movie_link.html">Movie title here 20</a><br />
  </div>
</div>

To display divs in fourcolumnswrapper as four columns you will need this css:

.fourcolumnswrapper {
  width:1000px; /* width must be set */
}

.moviescolumn {
  float:left;
  width: 25%;
}

Finally to achieve this in Django template system you can write:

<div class="fourcolumnswrapper">
  <div class="moviescolumn">
    {% for movie in movies.object_list %}
    <a href="{{ movie.get_absolute_url}}">{{ movie.title }}</a><br/>
    {% if forloop.counter|divisibleby:"25" and not forloop.last %}
  </div>
  <div class="moviescolumn">
    {% endif %}
    {% endfor %}
  </div>
</div>

You can see final effect here on JSFiddle.

Upvotes: 0

Related Questions