pagination 구현하기📝

View 구현하기

1. 먼저 Paginator를 import 합니다.from django.core.paginator import Paginator
2. page_list 뷰에 Paginator를 생성합니다.
   • Paginator는 첫 번째 파라미터로 페이지를 나눌 데이터 목록을, 두 번째 파라미터로는 한 페이지에 표시할 데이터의 개수를 받습니다.
   def page_list(request): object_list = Page.objects.all() paginator = Paginator(object_list, 8) # Paginator 생성 return render(request, 'diary/page_list.html', {'object_list': object_list})
3. 현재 보여줄 페이지의 번호를 쿼리스트링으로 부터 가져옵니다.def page_list(request): object_list = Page.objects.all() paginator = Paginator(object_list, 8) curr_page_number = request.GET.get('page') # 쿼리스트링 데이터 중 'page'의 값을 가져옵니다. return render(request, 'diary/page_list.html', {'object_list': object_list})
4. 만약 curr_page_number가 None일 경우, 즉 처음으로 일기 목록 페이지에 접근해서 쿼리스트링의 데이터 중 'page'의 값이 없을 때는 첫 페이지로 설정 되도록 curr_page_number를 1로 설정합니다.def page_list(request): object_list = Page.objects.all() paginator = Paginator(object_list, 8) curr_page_num = request.GET.get('page') if curr_page_num is None: # 만약 쿼리스트링에 'page'가 없어서 None이 설정되었다면 curr_page_num = 1 # 첫 번째 페이지를 가리키는 1로 바꿔줍니다. return render(request, 'diary/page_list.html', {'object_list': object_list})
5. 이제 curr_page_num을 이용해서 Paginator로 부터 해당 번호의 페이지를 가져오면 됩니다.def page_list(request): object_list = Page.objects.all() paginator = Paginator(object_list, 8) curr_page_num = request.GET.get('page') if curr_page_num is None: curr_page_num = 1 page = paginator.page(curr_page_num) # Paginator로 부터 하나의 페이지를 가져옵니다. return render(request, 'diary/page_list.html', {'object_list': object_list})
6. 그리고 가져온 페이지를 page_list 템플릿으로 넘겨줍니다. 지금은 모든 page 데이터를 넘겨주고 있지만 이제는 모든 데이터를 한 번에 표시하는 것이 아니라 하나의 페이지에 있는 데이터만 보여줄 것이기 때문입니다.def page_list(request): object_list = Page.objects.all() paginator = Paginator(object_list, 8) curr_page_num = request.GET.get('page') if curr_page_num is None: curr_page_num = 1 page = paginator.page(curr_page_num) return render(request, 'diary/page_list.html', {'page': page}) # 이제는 페이지를 넘겨줍니다.

Template 구현하기

• 이제 page_list 템플릿에 pagination을 적용해 주겠습니다.
  • 먼저 기존의 모든 데이터를 가져와서 사용하는 부분 대신 page 안에 있는 데이터를 사용하도록 수정해 주겠습니다.
  {% extends './base.html' %} {% block content %} {% if page.object_list %} <!-- [A] object_list 대신 page.object_list 로 수정 --> <div class="wrap-note"> <div class="note"> <div class="note-list"> <ul> {% for obj in page.object_list %} <!-- [B] object_list 대신 page.object_list 로 수정 --> <li> ... </li> {% endfor %} </ul> </div> ... {% endif %} {% endblock content %}
  • 그 다음 페이지 아래 있는 pagination을 위한 코드를 복사해서 [C]위치에 넣어주겠습니다.
  {% extends './base.html' %} {% block content %} {% if page.object_list %} <div class="wrap-note"> <div class="note"> <div class="note-list"> <ul> {% for obj in page.object_list %} ... {% endfor %} </ul> </div> <!-- [C] 이곳에 페이지네이션을 붙여 넣어줍니다. --> <div class="paging"> {% if [D] %} <a href="[E]" class="first">처음</a> <a href="[F]" class="prev">이전</a> {% endif %} <span class="page"> <p>[G]</p> </span> {% if [H] %} <a href="[I]" class="next">다음</a> <a href="[J]" class="last">마지막</a> {% endif %} </div> </div> </div> {% else %} ... {% endif %} {% endblock content %}

이전 페이지 구현하기

• [D] 현재 페이지의 이전에 페이지가 있는지를 .has_previous를 이용해 체크하고 만약 있다면 쿼리스트링을 이용해서 처음으로 가는 링크와 이전 페이지로 가는 링크를 작성해 줍니다.
  • 처음으로 가는 페이지 번호는 1이지만 이전 페이지의 페이지 번호는 현재 페이지를 기준으로 해야 하므로 .previous_page_number 메소드를 이용합니다.
  ... <div class="paging"> {% if page.has_previous %} <a href="?page=1" class="first">처음</a> <a href="?page={{page.previous_page_number}}" class="prev">이전</a> {% endif %} <span class="page"> <p>[G]</p> </span> {% if [H] %} <a href="[I]" class="next">다음</a> <a href="[J]" class="last">마지막</a> {% endif %} </div> ...

현재 페이지 구현하기

• 전체 페이지 중 현재 몇 번째 페이지에 있는지를 보여주는 부분을 작성해 주겠습니다.
• [G] 위치에 <현재 페이지 번호> of <전체 페이지 번호> 형식으로 만들어 주면 되는데 현재 페이지 번호는 .number를 사용하면 되지만 전체 페이지 번호는 전체 페이지 개수와 같은 값으로 현재의 페이지가 아닌 paginator가 가지고 있는 값 입니다.
• .paginator.num_pages를 이용해서 전체 페이지 번호를 알 수 있습니다.

... <div class="paging"> {% if page.has_previous %} <a href="?page=1" class="first">처음</a> <a href="?page={{page.previous_page_number}}" class="prev">이전</a> {% endif %} <span class="page"> <p>{{page.number}} of {{page.paginator.num_pages}}</p> <!-- 이 부분을 작성합니다. --> </span> {% if [H] %} <a href="[I]" class="next">다음</a> <a href="[J]" class="last">마지막</a> {% endif %} </div> ...

다음 페이지 구현하기

• [H] 현재 페이지 다음에 페이지가 있다면 다음 페이지로 가는 링크와 마지막 페이지로 가는 링크가 나오도록 작성해 주겠습니다.
• .has_next를 이용해서 다음 페이지가 있는지 여부를 확인하고 쿼리스트링을 이용해서 링크를 작성합니다.
• 다음 페이지의 페이지 번호는 현재 페이지를 기준으로 하므로 .next_page_number를 이용합니다.
• 마지막 페이지 번호는 paginator에 있는 전체 페이지의 개수와 같으므로 paginator의 page 개수를 나타내는 .paginator.num_pages를 이용합니다.

... <div class="paging"> {% if page.has_previous %} <a href="?page=1" class="first">처음</a> <a href="?page={{page.previous_page_number}}" class="prev">이전</a> {% endif %} <span class="page"> <p>{{page.number}} of {{page.paginator.num_pages}}</p> </span> {% if page.has_next %} <!-- 만약 다음 페이지가 있다면 --> <a href="?page={{page.next_page_number}}" class="next">다음</a> <a href="?page={{page.paginator.num_pages}}" class="last">마지막</a> {% endif %} </div> ...

모두 작성 되었다면 개발 서버를 켜고 일