클래스형 뷰를 사용한 CRUD(2)-Bootstrap을 이용한 pagination

0. Pagination이란?

게시판이나 블로그처럼 객체가 많은 경우, 페이지로 나누어 보여주는 것이 보기도 좋고 사용하기 편하다.

2021.06.23 - [웹프로그래밍/Django] - 클래스형 뷰를 사용한 CRUD

 

1. Pagination 구현

#views.py
class BookmarkListView(ListView):
    model = Bookmark
    paginate_by = 3 #객체 3개가 한 페이지

https://getbootstrap.com/docs/5.0/components/pagination/ 에서 Alignment 즉 중앙 배치된 경우를 복사해서 사용하겠습니다.

 

<!--bookmark_list.html의 </table>태그 바로 아래에 추가해주기-->
{% block pagination %}
<!-- 페이지기능입니다. -->
{% if is_paginated %}
<!-- 페이지 기능을 사용할 조건이 된다면 -->
<ul class="pagination justify-content-center">
    <!-- 이전페이지 돌아가기 -->
    {% if page_obj.has_previous %}
    <!-- 이전페이지 객체가 있으면 [Previous]버튼 활성화 -->
    <li class="page-item">
        <a class="page-link" href="{% url 'list' %}?page={{page_obj.previous_page_number}}" tabindex="-1">Previous</a>
    </li>
    {% else %}
    <!-- 이전페이지 객체가 없으면 [Previous]버튼 비활성화 (= 안눌리도록 함) -->
    <li class="page-item disabled">
        <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    {% endif %}


    <!-- 페이지를 번호로 출력 -->
    {% for object in page_obj.paginator.page_range %}
    <!-- 현재 선택한 페이지 번호는 비활성화시킨다. -->
    <li class="page-item {% if page_obj.number == forloop.counter %} disabled {% endif %}">
        <a class="page-link" href="{{request.path}}?page={{forloop.counter}}">{{forloop.counter}}</a>
    </li>
    {% endfor %}


    <!-- 다음페이지로 가기 -->
    {% if page_obj.has_next %}
    <!-- 이전페이지 객체가 있으면 [Next]버튼 활성화 -->
    <li class="page-item">
        <a class="page-link" href="{% url 'list' %}?page={{page_obj.next_page_number}}">Next</a>
    </li>
    {% else %}
    <!-- 이전페이지 객체가 없으면 [Next]버튼 비활성화 -->
    <li class="page-item disabled">
        <a class="page-link" href="#">Next</a>
    </li>
    {% endif %}

</ul>
{% endif %}
{% endblock %}

 

2. 결과 화면