[Django] 페이징

#장고 shell 을 이용해서 간편하게 대량의 테스트 데이터를 만들 수 있음.
from pybo.models import Question
from django.utils import timezone

for i in range(300):
	q = Question(subject = '테스트데이터입니다:[%03d]' % i, content = '내용무', create_date = timezoen.now()) 
	q.save()


#pybo/views.py 
def index(request):
    page = request.GET.get('page','1') #페이지
    question_list = Question.objects.order_by('-create_date')
    paginator = Paginator(question_list,10) #페이지 당 10개씩 보여주기
    page_obj = paginator.get_page(page)
    context = {'question_list': page_obj}

    return render(request, 'pybo/question_list.html', context)


#page = request.GET.get('page','1') 은 http://localhost:8000/pybo/?page=1 처럼
#GET 방식으로 호출된 URL 에서 page 값을 가져올 때 사용한다.
#만약 http://localhost:8000/pybo/ 처럼 page값 없이 호출된 경우에는 디폴트로 1이라는 값을 설정한다.



#페이지 자르기
{% for page_number in question_list.paginator.page_range%}
        {% if page_number >= question_list.number|add:-5 and page_number <= question_list.number|add:5 %}
        {% if page_number == question_list.number %}
        <li class = 'page-item active' aria-current="page">
            <a class="page-link" href = "?page={{page_number}}">{{page_number}}</a>
        </li>
        {% else %}
        <li class="page-item">
            <a class = 'page-link' href = "?page = {{page_number}}">{{page_number}}</a>
        </li>
        {% endif %}
        {% endif %}
        {% endfor %}


|add: 5, |add : 5 는 템플릿 필터이다.
- |add: 5 는 5만큼 더하라의미
- |add: -5 는 5만큼 빼라







#형식에 맞추어 출력
#데이터를 형식에 맞추어 출력할 수 있다.
#이것은 문자열의 형식을 지정하는 방법이다.

'''
- 출력형식에 형식화된 문자열을 넣어 출력의 모양을 변경하는 것이다.
- "%형식문자"로 지정하면 % 뒤의 출력 대상들이 1:1로 대응되어 출력
- %s : 문자열, %d : 정수, %f : 실수 등이 있다.
- %03d : 정수를 3칸에 맞추어 출력하는데 앞의 빈칸은 0으로 채워라
- %6.2f : 실수를 전체 6칸 소수이하 2칸에 맞추어 출력하라.

'''

 

#page_obj 에는 다음과 같은 속성들이 있다.

 

항목	설명
paginator.count	전체 게시물 개수
paginator.per_page	페이지당 보여줄 게시물 개수
paginator.page_range	페이지 범위
number	현재 페이지 번호
previous_page_number	이전 페이지 번호
next_page_number	다음 페이지 번호
has_previous	이전 페이지 유무
has_next	다음 페이지 유무
start_index	현재 페이지 시작 인덱스(1부터 시작)
end_index	현재 페이지의 끝 인덱스(1부터 시작)

#페이징 html 코드

{% extends 'base.html'%}
{% block content %}

<div class="container my-3">
    <table class="table">
        <thead>
        <tr class="table-dark">
            <th>번호</th>
            <th>제목</th>
            <th>작성일시</th>
        </tr>
        </thead>
        <tbody>
        {% if question_list %}
        {% for question in question_list %}
        <tr>
            <td>{{ forloop.counter }}</td>
            <td>
                <a href="{% url 'pybo:detail' question.id %}">{{ question.subject }}</a>
            </td>
            <td>{{ question.create_date }}</td>
        </tr>
        {% endfor %}
        {% else %}
        <tr>
            <td colspan="3">질문이 없습니다.</td>
        </tr>
        {% endif %}
        </tbody>
    </table>

       <!-- 페이징처리 시작 -->
    <ul class="pagination justify-content-center">
        <!-- 이전페이지 -->
        {% if question_list.has_previous %}
        <li class="page-item">
            <a class="page-link" href="?page={{ question_list.previous_page_number }}">이전</a>
        </li>
        {% else %}
        <li class="page-item disabled">
            <a class="page-link" tabindex="-1" aria-disabled="true" href="#">이전</a>
        </li>
        {% endif %}
        <!-- 페이지리스트 -->
        {% for page_number in question_list.paginator.page_range %}
        {% if page_number >= question_list.number|add:-5 and page_number <= question_list.number|add:5 %}
        {% if page_number == question_list.number %}
        <li class="page-item active" aria-current="page">
        <a class="page-link" href="?page={{ page_number }}">{{ page_number }}</a>
        </li>
        {% else %}
        <li class="page-item">
        <a class="page-link" href="?page={{ page_number }}">{{ page_number }}</a>
        </li>
        {% endif %}
        {% endif %}
        {% endfor %}
        <!-- 다음페이지 -->
        {% if question_list.has_next %}
        <li class="page-item">
            <a class="page-link" href="?page={{ question_list.next_page_number }}">다음</a>
        </li>
        {% else %}
        <li class="page-item disabled">
            <a class="page-link" tabindex="-1" aria-disabled="true" href="#">다음</a>
        </li>
        {% endif %}
    </ul>
    <!-- 페이징처리 끝 -->
    <a href = "{% url 'pybo:question_create'%}" class = 'btn btn-primary'>질문 등록하기</a>
</div>
{% endblock %}

 

{% if question_list.has_previous%} 

: 이전 페이지가 있는 지 체크

 

{{question_list.previous_page_number}}

: 이전 페이지 번호

 

{%if question_list.has_next %}

: 다음 페이지가 있는 지 체크

 

{{question_list.next_page_number}}

: 다음 페이지 번호

 

{% for page_number in question_list.paginator.page_range %}

: 페이지 리스트 루프

 

{% if page_number == question_list.number %}

: 현재 페이지와 같은 지 체크

 

 

**tabindex

: 해당 속성은 키보드 접근성에 근접한 속성이다.

#말 그대로 스크린 리더 사용자가 키보드를 통해 웹 페이지의 정보에 접근하는 것이다.
#스크린 리더를 쓰지 않더라도, 흔히 우리도 탭이나 엔터를 통해 사용하고 있다.


tabindex = '0'
tabindex = '1~32768'
tabindex = '-1'

#속성 값이 0 인 경우는 탭을 눌렀을 때 포커스가 가지 않는 엘리먼트에게 포커스를 줄 수 있다.
#div 영역에도 포커스를 줄 수 있다는 의미이다.

#속성 값이 -1 인 경우에는 반대로 탭을 눌렀을 때 포커스가 가는 엘리먼트에게 포커스를 잃게 할 수 있다.
#예를 들어 링크 일리먼트에 포커스를 잃게 한다는 의미이다.