javascript - Create several pages from array

Question

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 :

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 1

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, EmptyPage, PageNotAnInteger
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 %}