Create a table in an html page using user generated variables (through admin)

Using Django Templates & Frontend
1

I want to make a table in the html page so that every time the admins input a new object sub_category (a predetermined class) it will update the table.

For reference im trying to make something like this:

image
image995×679 46 KB

Here is my code, thank you in advanced!

HTML page that displays the table:

{% extends 'item_type/base.html' %}



{% block content %}

<h1>Clothing</h1>


    <table>
        
            
                {% for j in sub_category %}
                    {% with x=0 %}
                        <tr>

                            {% while x<4 %}
                                <td> <a href="{% url 'show_subcategory' j.id %}"> {{j}}</td>
                                
                            {% endwhile %}
                            
                        </tr>
                        <tr>
                            {% while x>4 and x<8%}
                                <td> <a href="{% url 'show_subcategory' j.id %}"> {{j}}</td>
                                {% x+=1%}
                            {% endwhile %}
                        </tr>
                        {% x+=1%}
                    {% endwith %}
                {% endfor %}
        

    </table>

       
{% endblock  %}

Class where sub categories are created (ignore the spelling of category!)

class SubCategorie(models.Model):
    sub_category = models.CharField('Clothing Type',max_length=100)
    def __str__(self):
        return self.sub_category

Function in views.py thats linked to the html page

def clothing(request):
    sub_category = SubCategorie.objects.all()
    rows = [1,2,3]
    columns = [1,2,3,4]
    context = {'sub_category':sub_category,'rows':rows,'columns':columns}
    return render(request,'item_type/clothing.html',context )
2

Do you know in advance how many columns you want?
Do you know how those categories are supposed to be divided into columns?

It’s easy to create this layout by breaking your page organizations into columns using CSS. That way, you can render these elements “linearly”, without needing to “over manage” the column structure.

For example, if you were using bootstrap, it would be something to the general effect of:

<div class="col">
 <p></p>
 <p></p>
 ...
</div>
<div class="col">
 <p></p>
 <p></p>
 ...
</div>
<div class="col">
 <p></p>
 <p></p>
 ...
</div>

This way it’s going to be a whole lot easier to generate than trying to render the data in row-order

3

Thank you very much! with regards to your questions. I wanted it to be separated in 4 columns and what i was wondering if it was possible was that the website updated itself in case a new “sub-category” was added so that it would automatically change the config of the table. Its not fully required for what im trying to do as i can always manually change it but just a personal question. Once again, thanks for the helpful reply!

4

It’s a question of what you want changed and whether you can identify that algorithmically. For instance, if you want 4 columns of roughly equal size but you don’t want to split categories across columns, that’s fairly easy. So it’s not so much a question of if it can be done - it almost certainly can. It’s a question of whether you can define how to achieve the desired result.