I tried to create a table only with Django

Background You want to receive multiple elements in an array on the display side and display them using <table> </table>. If you want to display in 5 columns, there will be a scene where you divide the columns somewhere.

If it is javascript

    var i = 0;
    var cols = 5; //Number of columns
    var row_ele = NaN;

    for (key in dataset){
        if (i == 0){
            row_ele = NaN;
            row_ele = $("<tr></tr>");
        } 

        var cell = $("<td></td>");
        cell.text(dataset[key]);
        row_ele.append(cell);

        if (i == cols - 1){
            i = 0;
            $("table").append(row_ele);
        } else {
            i++;
        }
    }

I think I can write.

However, standard Django doesn't allow calculations within templates. Here, I will write the calculation method while introducing the django-mathfilters module.

dataset & list view As a sample example, we are using about 100 words that have become trendy on twitter.

`views.py`


from django.views.generic import TemplateView

class IndexView(TemplateView):
    template_name = 'index.html'

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        words = ['Total stop','#The best height difference between boyfriend and girlfriend is 13 cm','Start work','Tomomi Itano','Tomomi Marriage'
                ,'New entry of foreigners','Business people','#Solution King and Prince','#Refreshing','#Asaichi'
                ,'Devil voice actor','Remote live appearance','Student mobilization','#Ochoyan','crowded train'
                ,'Mr. Koike's mismanagement','Beginning of work','graduate student','Teacher's medical field','Nursing University'
                ,'Mr. Namikawa','Strawberry day','Complete victory S','Director Takatsu','Declaration issuance request'
                ,'Mr. Asanuma','Marriage registration witness column','Yasushi Akimoto','Chiyo-chan','Nakayama 1R'
                ,'Touken Danshi rice','Keiji-kun','Toyosu Market','Starting work','Minotauros dish'
                ,'Entering the cold','High school soccer emergency declaration','Go day','England','Rookie section'
                ,'Strawberry day','Illegal employment / guarantee undeclared','Manba-chan','Shizuoka held','Remarks by President of Asahikawa Medical University'
                ,'Telework','Woman Rush Hour Muramoto','Sushi Zanmai','Saitama self-restraint','Bluefin tuna from Oma'
                ,'Devil voice actor','Beginning of work','graduate student','Teacher's medical field','Strawberry day'
                ,'Nursing University','Mr. Namikawa','Complete victory S','Declaration issuance request','Director Takatsu'
                ,'Marriage registration witness column','Yasushi Akimoto','Mr. Asanuma','Chiyo-chan','Keiji-kun'
                ,'Touken Danshi rice','Toyosu Market','Starting work','Minotauros dish','England'
                ,'Go day','Entering the cold','Manba-chan','Rookie section','Strawberry day'
                ,'High school soccer emergency declaration','Remarks by President of Asahikawa Medical University','Shizuoka held','Bluefin tuna from Oma'
                ,'Saitama self-restraint','Telework','Sushi Zanmai','Itano','Illegal employment / guarantee undeclared'
                ,'Get addicted','Total stop','Start work','#The best height difference between boyfriend and girlfriend is 13 cm','Tomomi Itano'
                ,'Tomomi Marriage','New entry of foreigners','Business people','#Solution King and Prince','#Ochoyan'
                ,'#Refreshing','#Asaichi','Remote live appearance','Mr. Koike's mismanagement','Student mobilization'
                ,'crowded train']
        context["tweets"] = words 
        return context

`index.html`


<!DOCTYPE HTML>

<html>
    <head> </head>
    <body> 
        <h1> mathfilter </h1>
            <ul>
            {% for item in tweets %}
                <li>{{item}}</li>
            {% endfor %}
            </ul>
    </body>
</html>

I store an array containing tweet words using tweets as a key, send it to the view side, and draw each element using the for statement with {% for item in tweets%} {% endfor%} I will.

The display will be a one-column list display.

add module

Then add django-mathfilters. Install the module with pip and add the application with settings.py.

pip3 install django-mathfilters

`settings.py`


INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'mathfilters'
]

improvement

<!DOCTYPE HTML>
{% load mathfilters %} <!--Defined in html-->

<html>
    <head> </head>
    <body> 
        <h1> mathfilter </h1>
            <table>
            {% for item in tweets %}
                {% with index=forloop.counter0 %} <!--Get index-->
                    {% if index|mod:5 == 0 %} <tr> {% endif %}
                        <td>
                            {{item}}
                        </td>
                    {% if index|mod:5 == 4 %} </tr> {% endif %}
                {% endwith %}
            {% endfor %}
            </table>
    </body>
</html>

If you set {% with index = forloop.counter0%} {% endwith%}, you can get the index like for i, item in enumerate (range (...)): print (i). This feature is standard in Django. index | mod: 5 will calculate the remainder of the numbers with the function of mathfilters that I would like to introduce this time. In addition to this, you can perform four arithmetic operations by adding addition`` sub mul`` div. Here, if index% 5 == 0, add<tr>to the beginning, and if index% 5 == 4, add </tr> to the end.

The browser is displayed in 5 columns of the table as shown below.

Reference -How to perform arithmetic processing with Django template -Display loop counter number in Django Template -How to subtract (subtract) in a [Django] template