Open1
Djangoでページネーションを簡単に実装する方法(ListView + Bootstrap対応)

Djangoの ListView と Bootstrap を使って、実用的なページネーションUIを簡単に実装する方法をまとめました。備忘録メモ。
BootStrapチートシート
コードとプレビュー画面がとても見やすいのでとても便利
この記事でわかること
・Djangoの ListView で paginate_by を設定する方法
・テンプレートで page_obj を使ったページネーション表示
・Bootstrap を使ったページネーションデザインのサンプルコード
ListView に paginate_by を設定
views.py
from django.views import generic
from .models import SnsBoardModel
class BoardView(generic.ListView):
model = SnsBoardModel
template_name = "board.html"
paginate_by = 5 # ← 1ページに表示する件数
この1行だけで、Djangoは自動的にページネーション用のオブジェクト page_obj をテンプレートに渡してくれます。
2. テンプレートでページネーションを表示
page_obj を使うことで、以下のような情報にアクセスできます:
・page_obj.number: 現在のページ番号
・page_obj.paginator.page_range: 全ページ番号のリスト
・page_obj.paginator.num_pages: 総ページ数
・page_obj.has_previous: 前のページが存在するか(真偽値)
・page_obj.has_next: 次のページが存在するか(真偽値)
・page_obj.previous_page_number: 前のページの番号
・page_obj.next_page_number: 次のページの番号
Bootstrap対応のページネーションHTML
以下は Bootstrap のデザインに対応した pagination テンプレートです。
<nav aria-label="Page navigation">
<ul class="pagination">
<!-- 前へ -->
{% if page_obj.has_previous %}
<li class="page-item">
<a class="page-link" href="?page={{ page_obj.previous_page_number }}" aria-label="Previous">
<span aria-hidden="true">前</span>
</a>
</li>
{% else %}
<li class="page-item disabled">
<span class="page-link" aria-hidden="true">前</span>
</li>
{% endif %}
<!-- ページ番号 -->
{% for num in page_obj.paginator.page_range %}
<li class="page-item {% if page_obj.number == num %}active{% endif %}">
<a class="page-link" href="?page={{ num }}">{{ num }}</a>
</li>
{% endfor %}
<!-- 次へ -->
{% if page_obj.has_next %}
<li class="page-item">
<a class="page-link" href="?page={{ page_obj.next_page_number }}" aria-label="Next">
<span aria-hidden="true">次</span>
</a>
</li>
{% else %}
<li class="page-item disabled">
<span class="page-link" aria-hidden="true">次</span>
</li>
{% endif %}
</ul>
</nav>
↑ページが存在している場合のみクリックできるサンプル
page_obj
がどのように利用できるか把握できればBootStrapのチートシートを利用する事で爆速で素晴らしいUIを実現できます