はじめに

Djangoでページネーションの実装を行う必要があった。
その際、ページあたりのコンテンツの表示数を変更できるような実装を行いたかった。
今回は記事の一覧表示を行うアプリケーションを参考に実装方法を示す。

環境

Python 3.7.3
Django 2.1.6
bootstrap4

Model

app/models.py

from django.db import models

class Article(models.Model):
  title = models.CharField('title', max_length=255)
  content = models.CharField('content', max_length=255)

Form

コンテンツの表示数を10〜50で変更できるようにしている。
また、今回はセレクトボックスで値を選択した時点で、submitも行いたいため、
widget=forms.Select(attrs={'onchange': 'submit(this.form);})
のようにしている。

app/forms.py

from django import forms

PAGINATE_BY_CHOICES = (
  ('', '-'*10),
  (10, '10'),
  (20, '20'),
  (30, '30'),
  (40, '40'),
  (50, '50')
)

class Paginate(forms.Form):
  paginate_by = forms.ChoiceField(
    label='記事表示数',
    widget=forms.Select(attrs={'onchange': 'submit(this.form);'}),
    choices=PAGENATE_BY_CHOICES
  )

View

Viewはdjango.view.Viewを利用している。現在Djangoを勉強中のため、むやみに汎用ビューを使いたくないという理由からです。
デフォルトではページあたり10個の記事を表示します。
また、セッションに選択したページあたりのコンテンツ数を保存することで、ページ遷移しても大丈夫なようにしています。

app/views.py

from django.views import View
from .models import Article
from . import forms
from django.core.paginator import Paginator, PageNotAnInteger, EmptyPage

class ArticleList(View):
  paginate_by = 10

  def get(self, request, **kwargs):
    form = forms.Paginate(request.GET or None)

    if 'paginate_by' in request.GET:
      request.session['paginate_by'] = request.GET['paginate_by']

    if 'paginate_by' in request.session:
      self.paginate_by = request.session['paginate_by']

    queryset = Article.objects.all()
    paginator = Paginator(queryset, self.paginate_by)
    try:
      contents = paginator.page(kwargs['page'])
    except PageNotAnInteger:
      contents = paginator.page(1)
    except EmptyPage:
      contents = paginator.page(paginator.num_pages)
    context = {}
    context['contents'] = contents
    context['form'] = form

    return render(request, 'app/article_list.html', context)

URLs

app/urls.py

from django.urls import path
from . import views

app_name = 'app'

urlpatterns = [
  path('article_list/<int:page>', views.ArticleList.as_view(), name='article_list'),
]

Template

app/aritcle_list.html

  <form name="paginate_form" action="{% url 'main:user_list' 1 %}" method="get">
    {{ form.paginate_by.label }} {{ form.paginate_by }}
  </form>

  <table class="table twitter-user-list">
    <thead>
    <tr>
      <th scope="col">タイトル</th>
      <th scope="col">内容</th>
    </tr>
    </thead>
    <tbody>
    {% for article in contents %}
      <tr>
        <td class="align-middle">{{ article.title }}</td>
        <td class="align-middle">{{ article.content }}</td>
      </tr>
    {% endfor %}
    </tbody>
  </table>
  <nav aria-label="Page navigation">
    <ul class="pagination justify-content-center">
      {% if contents.has_previous %}
        <li class="page-item">
          <a href="{% url 'app:article_list' 1 %}" class="page-link">1</a>
        </li>
        <li class="page-item">
          <a href="{% url 'app:article_list' contents.previous_page_number %}" class="page-link"><</a>
        </li>
      {% else %}
        <li class="page-item disabled">
          <a href="#" class="page-link">1</a>
        </li>
        <li class="page-item disabled">
          <a href="#" class="page-link"><</a>
        </li>
      {% endif %}
      <li class="page-item active">
        <a class="page-link" href="#">{{ contents.number }}</a>
      </li>
      {% if contents.has_next %}
        <li class="page-item">
          <a href="{% url 'app:article_list' contents.next_page_number %}" class="page-link">></a>
        </li>
        <li class="page-item">
          <a href="{% url 'app:article_list' contents.paginator.num_pages %}" class="page-link">{{ contents.paginator.num_pages }}</a>
        </li>
      {% else %}
        <li class="page-item disabled">
          <a href="#" class="page-link">></a>
        </li>
        <li class="page-item disabled">
          <a href="#" class="page-link">{{ contents.paginator.num_pages }}</a>
        </li>
      {% endif %}
    </ul>
  </nav>