ページネーション - Django

ページネーションの作成

pythonApp\crud\crud\member\urls.py

from django.urls import path
from . import views

urlpatterns = [
  path('', views.index, name='index'),
  path('<int:num>', views.index, name='index'),
  path('create', views.create, name='create'),
  path('edit/<int:num>', views.edit, name='edit'),
  path('delete/<int:num>', views.delete, name='delete'),
  path('find', views.find, name='find'),
  path('check', views.check, name='check'),
]

「 views.py 」を次のように変更します。

pythonApp\crud\crud\member\views.py

from django.core.paginator import Paginator

def index(request, num=1):
  data = User.objects.all()
  page = Paginator(data, 3) # 3 は、1ページに表示するデータ数
  
  params = {
    'title': 'Hello',
    'data': page.get_page(num)
  }
  return render(request, 'member/index.html', params)

テンプレートを次のように変更します。

pythonApp\crud\crud\member\templates\member\index.html

{% load static %}
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="{% static 'member/css/style.css' %}">
  <title>Document</title>
</head>
<body>
  <h1>member/index</h1>
  <p><a href="{% url 'create' %}">User Add</a></p>
  <p><a href="{% url 'find' %}">User Find</a></p>
  <table>
    <tr>
      <th>data</th>
      <th></th>
      <th></th>
    </tr>
    {% for item in data %}
    <tr>
      <td>{{item}}</td>
      <td><a href="{% url 'edit' item.id %}">Edit</a></td>
      <td><a href="{% url 'delete' item.id %}">Delete</a></td>
    </tr>
    {% endfor %}
  </table>
  <div class="pagination">
    <ul class="clearfix">
      {% if data.has_previous %}
      <li><a href="{% url 'index' %}">first</a></li>
      <li><a href="{% url 'index' %}{{data.previous_page_number}}">prev</a></li>
      {% endif %}
      {% if not data.has_previous %}
      <li>first</li>
      <li>prev</li>
      {% endif %}
      <li><span class="current">[ {{data.number}}/{{data.paginator.num_pages}} ]</span></li>
      {% if data.has_next %}
      <li><a href="{% url 'index' %}{{data.next_page_number}}">next</a></li>
      <li><a href="{% url 'index' %}{{data.paginator.num_pages}}">last</a></li>
      {% endif %}
      {% if not data.has_next %}
      <li>next</li>
      <li>last</li>
      {% endif %}
    </ul>
  </div>
</body>
</html>

style.css を次のように変更します。

pythonApp\crud\crud\member\static\member\css\style.css

.clearfix:after {
  content: "";
  clear: both;
  display: block;
}
a, a:hover, a:visited{
  text-decoration: none; 
  color: rgb(128, 128, 128);
}
.pagination ul {
  list-style: none;
}
.pagination ul li {
  float: left;
  color: gray;
}
.pagination ul li a {
  float: left;
  color: rgb(255, 0, 140);
}
.pagination ul li:not(:last-child){
  margin-right: 10px;
}

ページネーション テンプレート

<div class="pagination">
  <ul class="clearfix">
    {% if data.has_previous %}
    <li><a href="{% url 'index' %}">first</a></li>
    <li><a href="{% url 'index' %}{{data.previous_page_number}}">prev</a></li>
    {% endif %}

    {% if not data.has_previous %}
    <li>first</li>
    <li>prev</li>
    {% endif %}

    <li><span class="current">[ {{data.number}}/{{data.paginator.num_pages}} ]</span></li>

    {% if data.has_next %}
    <li><a href="{% url 'index' %}{{data.next_page_number}}">next</a></li>
    <li><a href="{% url 'index' %}{{data.paginator.num_pages}}">last</a></li>
    {% endif %}

    {% if not data.has_next %}
    <li>next</li>
    <li>last</li>
    {% endif %}
  </ul>
</div><!-- /div.pagination -->