[Django] 페이징 실습

준비

📌 이전에 만들었던 book 사용.

 

📌 페이징 확인을 위해 shell을 사용해 레코드 추가.

① shell 실행.

python manage.py shell

 

② 레코드 추가.

>>> from books.models import Books
>>> for i in range(1, 101):
...     n = f"{i}번째 책"
...     if i % 2 == 0:
...             w = "lee"
...     else:
...             w =  "kim"
...     Books(name=n, writer=w, content="this book is ...", hit=0).save()
... 
>>> quit()

 

페이징 실습

📌 페이징 실습

https://codingrecord2209.tistory.com/369

[Django] 페이징

 

① books/views.py에서 페이지 나눠서 데이터 넘기기.

from django.shortcuts import render, redirect
from .models import Books, Reply
from django.core.paginator import Paginator

# Create your views here.
def index(request):
    page = request.GET.get("page", 1)

    b = Books.objects.all()
    pag = Paginator(b, 10)
    obj = pag.get_page(page)
    context = {
        "bset" : obj
    }
    return render(request, "books/index.html", context)
...

 

②index.html에서 데이터 출력.

...
<!-- 페이징 -->
{% if bset.has_previous %}
    <a href="{% url 'index' %}?page=1"><button>처음</button></a>
    <a href="{% url 'index' %}?page={{ bset.previous_page_number }}"><button>이전</button></a>
{% else %}
    <button disabled>처음</button>
    <button disabled>이전</button>
{% endif %}

{% for i in bset.paginator.page_range %}
    <a href="{% url 'index' %}?page={{ i }}"><button {% if bset.number == i %}disabled{% endif %}>{{ i }}</button></a>
{% endfor %}

{% if bset.has_next %}
    <a href="{% url 'index' %}?page={{ bset.next_page_number }}"><button>다음</button></a>
    <a href="{% url 'index' %}?page={{ bset.paginator.num_pages }}"><button>마지막</button></a>
{% else %}
    <button disabled>다음</button>
    <button disabled>마지막</button>
{% endif %}

 

③ 연산을 위해 django-mathfilters 설치.

pip install django-mathfilters

 

④ config/settings에 등록.

...
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'books.apps.BooksConfig',
    'mathfilters'
]
...

 

⑤ index.html 수정.

{% load mathfilters %}
<h1>INDEX PAGE</h1>

<a href="{% url 'create' %}"><button>CREATE</button></a><br><br>

<table border="1">
    <tr>
        <th>NO</th>
        <th>TITLE</th>
        <th>WRITER</th>
        <th>HIT</th>
    </tr>
    {% for i in bset %}
        <tr>
            <td>{{ forloop.counter|add:bset.start_index|sub:1 }}</td>
            <td><a href="{% url 'detail' i.id %}">{{ i.name }}</a></td>
            <td>{{ i.writer }}</td>
            <td>{{ i.hit }}</td>
        </tr>
    {% empty %}
        <tr>
            <th colspan="4">NO DATA</th>
        </tr>
    {% endfor %}
</table>
<br>

<!-- 페이징 -->
{% if bset.has_previous %}
    <a href="{% url 'index' %}?page=1"><button>처음</button></a>
    <a href="{% url 'index' %}?page={{ bset.previous_page_number }}"><button>이전</button></a>
{% else %}
    <button disabled>처음</button>
    <button disabled>이전</button>
{% endif %}

{% for i in bset.paginator.page_range %}
    {% if i >= bset.number|sub:3 and bset.number|add:3 >= i %}
        <a href="{% url 'index' %}?page={{ i }}"><button {% if bset.number == i %}disabled{% endif %}>{{ i }}</button></a>
    {% endif %}
{% endfor %}

{% if bset.has_next %}
    <a href="{% url 'index' %}?page={{ bset.next_page_number }}"><button>다음</button></a>
    <a href="{% url 'index' %}?page={{ bset.paginator.num_pages }}"><button>마지막</button></a>
{% else %}
    <button disabled>다음</button>
    <button disabled>마지막</button>
{% endif %}

 

페이징 실습 - 결과

📌 페이징 실습 - 결과