Valentin Valentin - 1 year ago 69
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 %}

<style>
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;}

</style>

<!-- Title page -->

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

<!-- Body page -->

<br></br>
<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">
</form>

<br></br>

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

</div>

{% 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 :
Python
,
HTML
,
Javascript
(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')
try:
    query_naissance_list = paginator.page(page)
except PageNotAnInteger:
    query_naissance_list = paginator.page(1)
except EmptyPage:
    query_naissance_list = paginator.page(paginator.num_pages)

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 }}.
    </span>

    {% 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