ListViewを利用して作成したモデルのレコード一覧表示画面に、ページングの機能を実装してみます。
ListView自体の説明については関連ページをご覧下さい。
関連ページ
本記事では下記のClubモデルを利用しています。なおアプリケーションの名前はmyappです。
myapp/models.py
1 2 3 4 5 6 7 8 |
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
1 2 3 4 5 6 7 8 |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!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> |
表示結果
下記コードは、全てのページへのリンクを表示させずに制限しています。
myapp/templates/myapp/club_list.html の navのみ抜粋。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<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> |
表示結果
参照ページ
django
documentation