How To Use Django Cycle Tag

Question

This hopefully is a pretty easy question. My endgoal is to be able to view my database entries in a table which I can sort via the column headers. I have read the documentation on cycle tags, but don't know they mean by 'row1' and 'row2':

{% for o in some_list %}
    <tr class="{% cycle 'row1' 'row2' %}">
        ...
    </tr>
{% endfor %}

Secondly, how would I correctly implement it into my template? I am using a very simple JS library, which will allow the sorting:

page.html

{% if Variable %}
    <table class="sortable">
        <tr>
            <th>Title 1</th>
            <th>Title 2</th>
            <th>Title 3</th>
            <th>Title 4</th>
            <th>Title 5</th>
        </tr>
    {% for stuff in Variable %}

        <tr class="{% cycle 'stuff' %}">    
            <td>
                <a href="{% url 'detail_page' stuff.id %}">
                {{ stuff.Name|capfirst }}</a>
            </td>
        </tr>
    {% endfor %}
    </table>
{% else %}
    <p>No Results Found</p>
{% endif %}

my models.py in case you need it:

def view(request):
    Variable = database.objects.all()
    context = {
        'Variable': Variable,
    }
    return render(request, 'app/page.html', context)

EDIT: It seems I had the right code all along, just some unevenly applied CSS that made my table not look like a table. The cycle tag was not needed, only the for loop. It also looked better after adding another table row:

{% for stuff in Variable %}
<tr>
    <td>{{ stuff.Name|capfirst }}</td>
    <td>{{ stuff.Number|capfirst }}</td>
</tr>
{% endfor %}

Fardel

I don't think you want to use the cycle tag here. All it does is switch back and forth between a number of values, as the forloop iterates. The "rows" in the docs is just alternating between two classnames, each time the forloop runs (i.e. on first iteration, add row1 as a className, on the second use row2, on the third use row1, on the fourth row2 etc.) – Slater

You are absolutely right, I shouldn't. I took away the cycle tag, created another row, and I was able to see to see my table take 'form'. It seems I had it all along, just some unevenly applied CSS that made it look weird. Could you also just briefly explain to me what classnames are? I'm assuming with cycle, I am creating my own variables (row1 and row2). I am very new to programming in general, and self-teaching. – Fardel

They're just CSS class names (strings). So the code in the docs would switch between class="row1" and class="row2" back and forth while there are items in the list. – Slater

Thank you! That makes much more sense to me now! I will be sure to keep this info in mind when I styling the table. Thanks again :) – Fardel

Answer 1

For the cycle tag, the two arguments will be added alternately to the template, for example, the code in your template {% for o in some_list %}<tr class="{% cycle 'row1' 'row2' %}"></tr>{% endfor %} would generate:

<tr class="row1">
    ...
</tr>
<tr class="row2">
    ...
</tr>
<tr class="row1">
    ...
</tr>
<tr class="row2">
    ...
</tr>
<!-- ... and so on while there are elements in some_list -->

And so on. Normally you would attach some css to this, for example:

<style>
   .row1 {
      background: #345678;
   }
   .row2 {
      background: #123456;
   }
</style>

This would give alternate rows different background colours, for example.

Micronesia

Thank you for the clarification. Basically, 'row1' and 'row2' are just strings? In the example I provided at least? – Fardel

Exactly, they are just strings :), they are designed to be used as class names, so that you can attach some css styling to those classes and make the alternate items stand out for each other. Makes tables much easier to read for example. – Micronesia

Thank you! This makes a lot more sense to me now! I wish I could give upvotes, but need more rep haha. – Fardel

No problem, really glad to help :). You could accept the answer if you feel it's helped - that would give us both some more rep :). – Micronesia