[Answer]-Display max number of td elements in table row

1πŸ‘

βœ…

I think the simplest way to do this is to either a) determine the grouped lists in the view or b) use the built-in groupby template tag. groupby requires that the list of dictionaries be arranged by the grouping key, which would be level here. That’s best done in the view, since you probably don’t want the naive alphabetic sorting that the dictsort filter would give you.

{% regroup gauge_list by level as level_list %}
    {% for level in level_list %}
        <div class="row">
        <div class="span12">
            <table>
              {% for gauge in level.list %}
                {% if forloop.counter0|divisibleby:"6" %}
                  {% if not forloop.first %}</tr>{% endif %}                    
                  <tr>
                {% endif %}
                <td><div id="{{gauge.gauge_title}}" style="width: 280px; height: 210px; margin: 0 auto"></div></td>
              {% endfor %}
              </tr>
            </table>
        </div>
        </div>
    {% endfor %}

By doing it in the view, I mean something like providing a nested data structure instead of a simple list. Something like:

levels_and_gauges = [['red', [...red guage dicts]],
                     ['yellow', [...yellow guage dicts]],
                     ['green'], [...green guage dicts]]]

The template code would then be something like this:

{% for level, guages in levels_and_guages %}
    <div class="row">
    <div class="span12">
        <table>
          {% for guage in guages %}
            {% if forloop.counter0|divisibleby:"6" %}
              {% if not forloop.first %}</tr>{% endif %}                    
              <tr>
            {% endif %}
            <td><div id="{{gauge.gauge_title}}" style="width: 280px; height: 210px; margin: 0 auto"></div></td>
           {% endfor %}
           </tr>
         </table>
    </div>
    </div>
{% endfor %}

Or you could group into 6-length rows in the view rather than the template.

0πŸ‘

{% for level in ["red", "yellow", "green"] %}
    <div class="row">
        <div class="span12">
            <table>
            {% for gauge in gauge_list %}
                {% if gauge.level == level %}
                    <td><div id="{{gauge.gauge_title}}" style="width: 280px; height: 210px; margin: 0 auto"></div></td>
                {% endif %}
            {% endfor %}
            </table>
        </div>
    </div>
{% endfor %}
πŸ‘€falinsky

Leave a comment