Generating a dynamic HTML table from django template language

Question

I am trying to generate a dynamic html table using django template language and i've not been able to do it yet.

Here is some info about my Views.py and table.html

Views.py

Class table(TemplateView):
      template_name = 'table.html'

      def get(self, request):
             header = {'header':['#', 'chemblID','Preferable Name']}
             rows = {'rows':{
                            'id':[1,2,3],
                            'chemblid':[534988,31290, 98765], 
                            'prefName':['A', 'B', 'C']}}

             return render(request,self.template_name, header,rows)

(The data is hard-coded since i am still testing. However it's supposed to change according to the user input.)

table.html

<table class="table">
    <thead>
        <tr>
            {% for k in header %}
            <th>{{k}}</th>
            {% endfor %}
        </tr>
    </thead>
    <tbody>
        {% for r in rows %}
            <tr>
                {% for e in r %}
                    <td>{{e.id}}</td>
                    <td>{{e.chemblid}}</td>
                    <td>{{e.prefName}}</td>
                {% endfor %}
            </tr>
        {% endfor %}
    </tbody>
</table>

I am trying to generate something like this:

--------------------------------------------------------------
|     #      |      chemblID      |      Preferable Name      |
--------------------------------------------------------------
|     1      |       534988       |            A              |
--------------------------------------------------------------
|     2      |       31290        |            B              |
--------------------------------------------------------------
|     3      |       98765        |            C              |
--------------------------------------------------------------
|    ...     |        ...         |           ...             |
--------------------------------------------------------------

Thank you in advance for spending your time

on the view you have to send the context as dict in the render function. on the aboe example you are not doing that. that's why you are not able to get the variable values on template render(request,self.template_name, context={'header':header,'rows':rows}) — Nakul Narayanan
– Nakul Narayanan, Commented Jul 27, 2018 at 11:24

leelum1 · Accepted Answer · 2018-07-27 12:17:18Z

You can use the get_context_data method to send context to your template

Class table(TemplateView):
      template_name = 'table.html'

      def get_context_data(self, **kwargs):
            ctx = super(table, self).get_context_data(**kwargs)
            ctx['header'] = ['#', 'chemblID','Preferable Name']
            ctx['rows'] = [{'id':1, 'chemblid':534988,'prefName':'A'},
                           {'id':2, 'chemblid':31290,'prefName':'B'},
                           {'id':3, 'chemblid':98765,'prefName':'C'}]
            return ctx

And you can remove the extra loop in the html

<table class="table">
    <thead>
        <tr>
            {% for k in header %}
            <th>{{k}}</th>
            {% endfor %}
        </tr>
    </thead>
    <tbody>
        {% for r in rows %}
            <tr>
                <td>{{r.id}}</td>
                <td>{{r.chemblid}}</td>
                <td>{{r.prefName}}</td>
            </tr>
        {% endfor %}
    </tbody>
</table>

Pranay reddy · Accepted Answer · 2018-07-27 11:50:05Z

-1

In template just change table class

<table class="table table-bordered">

In view

return render(request,self.template_name,{"header":header,"rows":rows})

edited Jul 27, 2018 at 11:50

answered Jul 27, 2018 at 11:20

Pranay reddy

1601 silver badge13 bronze badges

2 Comments

Pranay reddy Over a year ago

by mistake i clicked submit, without giving full answer ....now updated

PythagorasDoe Over a year ago

Still doesn't work. with: return render(request,self.template_name, header,rows) I am able to do the header of table but not the rows. With return render(request,self.template_name, context ={"header": header,"rows":rows) I just get a weird table like First row with 1 column with text "Header" inside and a second row with 12 empty columns

Collectives™ on Stack Overflow

Generating a dynamic HTML table from django template language

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related