Django/inflearn

R : 페이지 구현하기

곽수진 2022. 11. 8. 02:54
반응형

▶ django shell을 이용해 Restaurant 클래스에 정보를 10개 추가

 

 

/third/list에 접속한 모습

▶ 이전에 존재하던 정보들에 이어서 동일한 정보를 가진 카드 10개가 추가적으로 생성된 모습

 

 

from django.shortcuts import render
from third.models import Restaurant
from django.core.paginator import Paginator

# Create your views here.
def list(request):
    restaurants = Restaurant.objects.all()
    paginator = Paginator(restaurants, 5)

    page = request.GET.get('page')
    items = paginator.get_page(page)

    context = {
        'restaurants': items
    }
    return render(request, 'third/list.html', context)

restaurants = Restaurant.objects.all() : Restaurant 클래스에 있는 모든 객체 값을 restaurants 변수에 담음

paginator = Paginator(restaurant, 5) : restaurant 변수에 담긴 값을 한 페이지에 5개씩만 출력하기 위해 페이지네이션 개념을 사용

    → 여러 아이템을 보여줄 때 페이지를 매겨주고 선택한 페이지에 따른 알맞은 목록을 보여주는 역할

page = request.GET.get('page') : query params에서 page 데이터를 가져옴

items = paginator.get_page(page) : 해당 페이지의 아이템으로 필터링

 

 

/third/list/?page=1 : 첫 번째 페이지에 접속

 

 

/third/list/?page=2 : 두 번째 페이지에 접속

 

 

{% extends 'third/base.html' %}
{% load static %}
{% block content %}
<div class="container">
    {% for item in restaurants %}
    <div class="row restaurant-item" style="margin:20px auto;">
        <div class="col-sm-12">
            <div class="card border-secondary">
                <div class="card-body">
                    <h5 class="card-title">{{ item.name }}</h5>
                    <h6 class="card-subtitle mb-2 text-muted">{{ item.address }}</h6>
                    <p class="card-text">음식점 설명</p>
                    <a href="#" class="card-link">자세히 보기</a>
                    <a href="#" class="card-link">수정하기</a>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}

    <div class="row">
        <div class="col-sm-12 text-center">
            <div class="pagination">
                <span class="step-links text-center" style="width:100%;">
                    {% if restaurants.has_previous %}
                        <a href="?page=1">&laquo;</a>
                        <a href="?page={{ restaurants.previous_page_number }}">{{ restaurants.previous_page_number }}</a>
                    {% endif %}
                    <span class="current">
                        {{ restaurants.number }}
                    </span>
                    {% if restaurants.has_next and restaurants.next_page_number != restaurants.paginator.num_pages %}
                        <a href="?page={{ restaurants.next_page_number }}">{{ restaurants.next_page_number }}</a>
                        <a href="?page={{ restaurants.paginator.num_pages }}">{{ restaurants.paginator.num_pages }}</a>
                    {% elif restaurants.has_next and restaurants.next_page_number == restaurants.paginator.num_pages %}
                        <a href="?page={{ restaurants.next_page_number }}">{{ restaurants.next_page_number }}</a>
                    {% endif %}
                </span>
            </div>
        </div>
    </div>
</div>
{% endblock %}

▶ 페이지에 접속했을 때 아래쪽에 페이지 링크가 뜨도록 list.html 파일 수정

{% if restaurants.has_previous %} : restaurants 인스턴스에 담긴 값이 이전 페이지를 가질 경우

{% restaurants.previous_page_number %} : restaurants 인스턴스에 담긴 값의 이전 페이지 번호 반환

{% if restaurants.has_next and restaurants.next_page_number != restaurants.paginator.num_pages %} : restaurants 인스턴스에 담긴 값이 다음 페이지를 가지고 있고 다음 페이지 번호가 총 페이지 번호와 다른 경우

    → {% restaurants.next_page_number } : restaurants 인스턴스에 담긴 값의 다음 페이지 번호 반환

    → {% restaurants.num_pages } : restaurants 인스턴스에 담긴 값의 총 페이지 번호 반환

{% if restaurants.has_next and restaurants.next_page_number == restaurants.paginator.num_pages %} : restaurants 인스턴스에 담긴 값이 다음 페이지를 가지고 있고 다음 페이지 번호가 총 페이지 번호와 동일한 경우

    → {% restaurants.next_page_number } : restaurants 인스턴스에 담긴 값의 다음 페이지 번호 반환

    → 다음 페이지 번호와 총 페이지 번호가 동일할 때 둘 다 반환하면 중복된 결과 나타남

count() : 총 객체 수 반환
num_pages() : 총 페이지 수 반환
page(n) : n번째 페이지 반환
page_range() : (1부터 시작하는) 페이지 리스트 반환
get_page() : n번 페이지 가져오기
has_next() : 다음 페이지의 유무를 boolean으로 반환
has_previous() : 이전 페이지의 유무를 boolean으로 반환
previous_page_number() : 이전 페이지 번호 반환
next_page_number() : 다음 페이지 번호 반환

 

 

/third/list/?page=1 접속한 모습
/third/list/?page=2 접속한 모습
/third/list/?page=3 접속한 모습

반응형

'Django > inflearn' 카테고리의 다른 글

U : 게시글 수정 구현하기  (0) 2022.11.10
C : 게시글 등록 구현하기  (0) 2022.11.09
R : 리스트 구현하기  (0) 2022.11.07
데이터 수정/삭제하기  (0) 2022.11.06
Column Lookup으로 복잡한 조건 탐색하기  (0) 2022.11.05