【Django】ページネーション

データベースを使って多量のデータを扱うようになると、それらをどう表示させるかを考える必要が出てきます。そこで重要となる機能が「ページネーション」というものです。

Paginatorクラスの使い方

このページネーションはDjangoでは「Paginator」というクラスとして用意されています。
このクラスを使うことで簡単にページ分けしてレコードを取り出すことができます。

インスタンスの作成

変数 = Paginator(コレクション, レコード数)

指定ページのレコードを取り出す

変数 = <Paginator>.get_page(番号)

それでは実際にPaginatorを使ってみましょう。
urlspatterns変数の追加
/hello/urls.py

from django.urls import path
from . import views

urlpatterns = [
・・
  path('<int:num>', views.index, name='index'),  #追加
]

/hello/views.py

from django.core.paginator import Paginator

def index(request, num=1):
  data = Contact.objects.all()
  page = Paginator(data, 3)
  params = {
    'title': 'Hello',
    'message':'',
    'data': page.get_page(num),
  }
  return render(request, 'hello/index.html', params)

1ページ目(3件ずつ表示)

2ページ目

ページを移動させる

ページを移動させるには、index.htmlを下記にように修正します。
/hello/templates/hello/index.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>hello</title>
</head>
<body class="container">
  <h1 class="display-4 text-primary">
    {{title}}</h1>
  <p>{{message|safe}}</p>
  <table class="table">
    <tr>
      <th>id</th>
      <th>name</th>
      <th>age</th>
      <th>mail</th>
      <th>birthday</th>
    </tr>
  {% for item in data %}
    <tr>
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
      <td>{{item.age}}</td>
      <td>{{item.mail}}</td>
      <td>{{item.birthday}}</td>
    <tr>
  {% endfor %}
  </table>
  <ul class="pagination justify-content-center">
    {% if data.has_previous %}
    <li class="page-item">
      <a class="page-link" href="{% url 'index' %}">
        « first</a>
    </li>
    <li class="page-item">
      <a class="page-link" 
      href="{% url 'index' %}{{data.previous_page_number}}">
        « prev</a>
    </li>
    {% else %}
    <li class="page-item">
      <a class="page-link">
        « first</a>
    </li>
    <li class="page-item">
      <a class="page-link">
        « prev</a>
    </li>
    {% endif %}
    <li class="page-item">
      <a class="page-link">
        {{data.number}}/{{data.paginator.num_pages}}</a>
    </li>
    {% if data.has_next %}
    <li class="page-item">
      <a class="page-link" 
        href="{% url 'index' %}{{data.next_page_number }}">
          next »</a>
    </li>
    <li class="page-item">
      <a class="page-link" 
        href="{% url 'index' %}{{data.paginator.num_pages}}">
          last »</a>
    </li>
    {% else %}
    <li class="page-item">
      <a class="page-link">
        next »</a>
    </li>
    <li class="page-item">
      <a class="page-link">
        last »</a>
    </li>
    {% endif %}
  </ul>
</body>

</html>

この記事は役に立ちましたか?

もし参考になりましたら、下記のボタンで教えてください。

関連記事

コメント

この記事へのコメントはありません。