[Answered ]-How to sort a list column wise on UI in django html

by

1👍

✅

If you know how many items you want per column this template tag may be useful for splitting into vertical lists. This may work best in combination with bootstrap – using “col-md-2”, for example:

<div class="row">
<div class="col-md-2"><ul>
{% for item in names %}

{% if forloop.counter0|divisibleby:"3" %}
</ul></div>
<div  class="col-md-2"><ul>
{% endif %}

<li>{{ item }}</li>
{% endfor %}

</ul></div>
👤philngo

1👍

Re-grouping the items in the list can help.

In the view

from itertools import zip_longest

names=['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
gr = [iter(names)]*3 # 3 is the number of rows
gb = zip(*zip_longest(*gr))
new_names = [ el for t in gb for el in t if el ]
return render(request, 'show_names_list.html', new_names)

Now names is

['a', 'd', 'g', 'j', 'b', 'e', 'h', 'c', 'f', 'i']

and you can try what happens in the template.

Alternatively, we can do:

in the view

from itertools import zip_longest

names=['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
gr = [iter(names)]*3 # 3 is the number of rows
gb = zip(*zip_longest(*gr))
return render(request, 'show_names_list.html', gb)

and in the template

<span>Names</span>
<div class="mr-l15">
{%for row in names %}
 {%for item in row %}
    <span>{{ item|default:"" }} </span>
 {% endfor %}
 <br>
{% endfor %}
👤Pynchia

Leave a comment