コメントの件数が増加したときに全てのコメントを表示するのではなく,例えば10件ごとにページを分ける処理が必要となる.Django のページネーションは Laravel ほど簡単ではないが,一度作成してしまえば再利用ができるのでここで作成しておこう.まず,ページネーションで2件だけを取得する方法は至って簡単である.views.py に1行を追加するだけでできる.(現状では高々10件ほどのデータしかないので,2件の表示にしているが,数字を適当に変更すれば良い.)
comments/views.py (抜粋)
class CommentIndexView(ListView):
model = Comment
queryset = Comment.objects.order_by('-updated_at')
paginate_by = 2
次は,ページを切り替えるためのリンクを設置する.comment_list.html に直接記述しても動作するが,テンプレート化して他のページからでも利用できるようにしておくとよい.comments/templates/ フォルダに simple_pagination.html を作成する.
comments/templates/simple_pagination.html
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center pagination-lg g-mt-28 g-mb-28">
{% if page_obj.has_previous %}
<li class="page-item">
<a class="page-link" href="?page={{ page_obj.previous_page_number }}">
<span aria-hidden="true">«</span>
</a>
</li>
{% else %}
<li class="page-item">
<a class="page-link disabled">
<span aria-hidden="true">«</span>
</a>
</li>
{% endif %}
{% if page_obj.has_next %}
<li class="page-item">
<a class="page-link" href="?page={{ page_obj.next_page_number }}">
<span aria-hidden="true">»</span>
</a>
</li>
{% else %}
<li class="page-item">
<a class="page-link disabled">
<span aria-hidden="true">»</span>
</a>
</li>
{% endif %}
</ul>
</nav>
さらに,comment_list.html からいま作成した simple_pagination.html を呼び出すと良い.
comments/templates/comments/comment_list.html (抜粋)
{% block content %}
<div class="container">
<h1 class="my-5">コメント一覧</h1>
{% for comment in object_list %}
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">
<a href="{% url 'comments:show' comment.id %}">
{{ comment.title }}
</a>
</h5>
<p class="card-text">{{ comment.body }}</p>
</div>
</div>
{% endfor %}
{% include 'simple_pagination.html' %}
<hr>
<div>
<p>
<a href="{% url 'comments:create' %}">
新規コメントの投稿
</a>
</p>
</div>
</div>
{% endblock content %}
ページの切り替えボタンが表示され,正しく動作していること,先頭や最後のページではどちらかのボタンが使えなくなること,「http://127.0.0.1:8000/?page=6」のようにURLのパラメータにページ番号が指定されていること,URLのパラメータを手動で書き換えても動作すること,views.py で paginate_by = 100 のように書き換えてもボタンが表示されていること,などを確認しよう.