djangoでブログにページャーを入れてみた

2022年5月3日

djangoでブログにページャーを入れてみた

出力するデータの件数が増えてくるとどうしても必要になってくるのがページャーです。
djangoでは「Pagenator」をインポートするだけで簡単に作れるみたいです。

View

viewは下の通りです。
「Paginator」のインポートを忘れないようにしましょう。


#--ページャー------------------------------------------
from django.core.paginator import Paginator
.
.
.
def display_blogs(request):
    blogs = Blog.objects.all().order_by('created_datetime')
        #第一引数にリスト、第二引数に表示する件数を設定
    paginator = Paginator(blogs, 10)
        #GETで送信されたページの値を取得
    current_page = request.GET.get('current_page')
        #指定ページのリストを取得
    blogs = paginator.get_page(current_page)
    context = {
        'blogs': blogs
    }
    return render(request, 'app/display_blogs.html', context)

Template

Templateは下の通りです。
ページャーは下の部分です。


{% extends 'app/base.html' %}
{% block content %}
<!--DELETE---------------------------------------->
<form method="post" action="{% url 'app:delete_blogs' %}" id="delete_blogs">{% csrf_token %}</form>
<div class="float_right"><button type="submit" class="negative_button" form="delete_blogs" onclick='return confirm("選択した項目を削除します。\nよろしいですか？");'>delete</button></div>
<!--CREATE---------------------------------------->
<form method="get" action="{% url 'app:create_blog' %}" id="create_blog"></form>
<div class="float_right"><button type="submit" class="positive_button" form="create_blog">create</button></div>
<!--TABLE----------------------------------------->
<table class = "data_record">
    <tr>
        <th>title</th>
        <th>create date</th>
        <th></th>
        <th></th>
    </tr>
    {% for blog in blogs %}
    <tr>
        <td><a href="{% url 'app:display_blog' blog.id %}">{{ blog.title }}</a></td>
        <td>{{ blog.created_datetime }}</td>
        <td>
        <form method="get" action="{% url 'app:edit_blog' blog.id %}">
            <button type="submit" class="neutral_button">edit</button>
        </form>
        </td>
        <td>
            <div class="checkbox_container">
                <input type="checkbox" name="delete_ids" value="{{ blog.id }}" form="delete_blogs" class="checkbox">
            </div>
        </td>
    </tr>
    {% endfor %}
</table>
<div class="pager">
    <!-- 前のページへのリンク -->
    {% if blogs.has_previous %}
        <a href="?current_page={{ blogs.previous_page_number }}">Previous</a>
    {% endif %}
    <!-- 現在のページ番号と全体のページ数 -->
    <span>
        {{ blogs.number }} / {{ blogs.paginator.num_pages }}
    </span>
    <!-- 次のページへのリンク -->
    {% if blogs.has_next %}
        <a href="?current_page={{ blogs.next_page_number }}">Next</a>
    {% endif %}
</div>
{% endblock %}

2022年5月3日