Django ページングの実装 [ListView]

ListViewを利用して作成したモデルのレコード一覧表示画面に、ページングの機能を実装してみます。

ListView自体の説明については関連ページをご覧下さい。

関連ページ

本記事では下記のClubモデルを利用しています。なおアプリケーションの名前はmyappです。

myapp/models.py

from django.db import models


class Club(models.Model):
    name = models.CharField(max_length=100)

    def __str__(self):
        return self.name

from django.db import models

class Club(models.Model):

name = models.CharField(max_length=100)

def __str__(self):

return self.name

まず1ページあたりのレコード数を決定します。

myapp/views.py

from django.shortcuts import render
from .models import Club
from django.views.generic import ListView


class ClubList(ListView):
    model = Club
    paginate_by = 3

from django.shortcuts import render

from .models import Club

from django.views.generic import ListView

class ClubList(ListView):

model = Club

paginate_by = 3

8行目

paginate_byに1ページあたりのレコード数を設定しています。

次にテンプレートを編集します。

myapp/templates/myapp/club_list.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>ページングサンプル</title>
</head>

<body>
    <table border="1">
        <tr>
            <th>id</th>
            <th>name</th>
        </tr>
        {% for club in object_list %}
        <tr>
            <td>{{ club.id }}</td>
            <td>{{ club.name }}</td>
        </tr>
        {% endfor %}
    </table>

    <nav>
        <ul>
            <!-- 前へ -->
            {% if page_obj.has_previous %}
            <li><a href="?page={{ page_obj.previous_page_number }}">前へ</a></li>
            {% endif %}

            {% for i in page_obj.paginator.page_range %}
            {% if page_obj.number == i %}
            <li>{{ i }}</li>
            {% else %}
            <li><a href="?page={{ i }}">{{ i }}</a></li>
            {% endif %}
            {% endfor %}

            <!-- 次へ -->
            {% if page_obj.has_next %}
            <li><a href="?page={{ page_obj.next_page_number }}">次へ</a></li>
            {% endif %}
        </ul>
    </nav>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>ページングサンプル</title>

</head>

<body>

<tr>

</tr>

{% for club in object_list %}

<tr>

</tr>

{% endfor %}

</table>

<nav>

<ul>

{% if page_obj.has_previous %}

{% endif %}

{% for i in page_obj.paginator.page_range %}

{% if page_obj.number == i %}

{% else %}

{% endif %}

{% endfor %}

{% if page_obj.has_next %}

{% endif %}

</ul>

</nav>

</body>

</html>

表示結果

下記コードは、全てのページへのリンクを表示させずに制限しています。

myapp/templates/myapp/club_list.html の navのみ抜粋。

<nav>
    <ul>
        <!-- はじめ、前へ -->
        {% if page_obj.has_previous %}
        <li><a href="?page=1">はじめ</a></li>
        <li><a href="?page={{ page_obj.previous_page_number }}">前へ</a></li>
        {% endif %}


        {% for n in page_obj.paginator.page_range %}

        {% if page_obj.number == n %}
        <li>{{ n }}</li>
        {% elif n > page_obj.number|add:'-2' and n < page_obj.number|add:'2' %}
        <li><a href="?page={{ n }}">{{ n }}</a></li>
        {% endif %}

        {% endfor %}

        <!-- 次へ、おわり -->
        {% if page_obj.has_next %}
        <li><a href="?page={{ page_obj.next_page_number }}">次へ</a></li>
        <li><a href="?page={{ page_obj.paginator.num_pages }}">おわり</a></li>
        {% endif %}
    </ul>
</nav>