Open1

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

tech_mwtech_mw

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を実現できます