Valentin Valentin - 1 year ago 58
HTML Question

Create several pages from array

I'm developing my

Django Project
about Civil State and I have a question according to my
HTML template

I'm displaying a list of objects from my
BirthCertificate table
with an
HTML Array
as you can see in my script :

{% extends 'Base_Accueil.html' %}

{% load staticfiles %}

{% block content %}

{% load bootstrap %}

table, th, td {
border: 1px solid black;
padding: 10px;
border-collapse: collapse;
text-align: center;

th {background-color: #0083A2;}

tr:hover td{background-color:lightslategray;}


<!-- Title page -->

<h2 align="center"> <font color="#0083A2"> Consultation des tables annuelles et décennales </font></align></h2>

<!-- Body page -->

<h4> <b><font color="#0083A2"> <span class="glyphicon glyphicon-user"></span> Liste des actes de naissance </b></font></h4>

<form method="GET" action="">
<input type="text" name="q1" placeholder="Entrer une année" value="{{ request.GET.q1 }}"> &nbsp;
<input class="button" type="submit" value="Rechercher">


<table style="width:50%">
<th>Date de Naissance</th>
<th>Ville de Naissance</th>
<th>Pays de Naissance</th>
<th>Date création de l'acte</th>
{% for item in query_naissance_list %}
<td> {{}} </td>
<td> {{item.lastname}} </td>
<td> {{item.firstname}} </td>
<td> {{item.birthday}} </td>
<td> {{item.birthcity}} </td>
<td> {{item.birthcountry}} </td>
{% endfor %}


{% endblock content %}

I get this website page :

enter image description here

My question is : How I can add some pages from my array in order to display the list ten by ten for example ?
Which langage I have to use :
(better way isn't it ?), ... ?

It's the first time I'm making this kind of things and I don't find on StackOverFlow or somewhere else clues to do that.

Thank you so much by advance !

Answer Source

Probably you are looking for pagination. You can add pages to the list view with Paginator.

Do something like this in your view:

from django.core.paginator import Paginator
paginator = Paginator(query_naissance_list, 10)
page = request.GET.get('page')
    query_naissance_list =
except PageNotAnInteger:
    query_naissance_list =
except EmptyPage:
    query_naissance_list =

In template add navigation:

    {% if query_naissance_list.has_previous %}
        <a href="?page={{ query_naissance_list.previous_page_number }}">previous</a>
    {% endif %}

    <span class="current">
        Page {{ query_naissance_list.number }} of {{ query_naissance_list.paginator.num_pages }}.

    {% if query_naissance_list.has_next %}
        <a href="?page={{ query_naissance_list.next_page_number }}">next</a>
    {% endif %}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download