hyeonga_code

파이선 웹구축_장고_25_페이징 페이지 번호 작성 본문

Python_Django

파이선 웹구축_장고_25_페이징 페이지 번호 작성

hyeonga 2023. 6. 17. 05:59
반응형

- 페이징

- 레코드가 많을 때 사용

- 1 페이지만 고정으로 띄울 것이 아니므로 페이지 번호도 인자로 받아와야 함

- get 전송 방식 사용

- 노출되어도 상관 없음

- 리소스를 적게 사용

 

1. 함수 설정 <board> > 'views.py'

'views.py'

=====

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
from django.core.paginator import Pageinator
 
def index(request):
    pg = request.GET.get('page',1)
    #_ 페이지 인자값이 없을 경우, default값을 1로 지정
    b = Board.objects.all()
    #_ Pagenator(A,B) A레코드를 B단위로 끊어서 페이징 할 것
    pag = Paginator(b,10)
    #_ 10개씩 끊어서 관리하는 보따리
    obj = pag.get_page(pg)
    
    context = {
        "bset": obj
    }
    return render(request, "board/index.html", context)
cs

 

 

 

- obj 객체 사용

1) paginator.page_range( 페이지 범위 )

#_ 페이지 범위 출력 (1,n)

ex) 12 페이지 > range(1,13)

2) paginator.num_pages

#_ 페이지 수(마지막 페이지)

3) number

#_ 현재 페이지 번호

4) previous_page_number

#_ 이전 페이지 번호

5) next_page_number

#_ 다음 페이지 번호

6) has_previous

#_ 이전 페이지의 유무

7) has_next

#_ 다음 페이지의 유무

8) start_index

#_ 해당 페이지의 시작 인덱스

9) end_index

#_ 해당 페이지의 마지막 인덱스

 

 

 

2. 페이징 버튼 작성 <templates> > <board> > 'index.html'

'index.html'

=====

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
    <nav aria-label="Page navigation example" class="mt-3">
        <ul class="pagination justify-content-center">
 
            {% if bset.has_previous %}
                #_ 전 페이지가 있을 경우
                <li class="page-item">
                    <a class="page-link" href="{% url 'board:index' %}?page=1&cate={{cate}}&kw={{kw}}">
                        HOME
                    </a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="{% url 'board:index' %}?page={{bset.previous_page_number}}&cate={{cate}}&kw={{kw}}">
                        PRE
                    </a>
                </li>
                #_ 검색한 페이지 정보 유지하기 위해 &으로 정보 유지
            {% else %}
                #_ 전 페이지 없을 경우
                <li class="page-item disabled"><a class="page-link">HOME</a></li>
                <li class="page-item disabled"><a class="page-link">PRE</a></li>
            {% endif %}
            
            {% for i in bset.paginator.page_range %}
                #_ 페이지 범위안에 있을 경우
                {% if bset.number|add:3 >= i and i >= bset.number|sub:3 %}
                #_ 현재 페이지에 +3, -3 범위의 페이지일 때
                    <li class="page-item {% if bset.number == i %} active {% endif %}">
                        <a class="page-link" href="{% url 'board:index' %}?page={{i}}&cate={{cate}}&kw={{kw}}">
                            {{i}}
                        </a>
                    </li>
                    #_ 페이지 숫자 버튼 생성
                {% endif %}
            {% endfor %}
 
            {% if bset.has_next %}
                #_ 다음 페이지 있을 경우 표시
                <li class="page-item">
                    <a class="page-link" href="{% url 'board:index' %}?page={{bset.next_page_number}}&cate={{cate}}&kw={{kw}}">
                        NEXT
                    </a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="{% url 'board:index' %}?page={{bset.paginator.num_pages}}&cate={{cate}}&kw={{kw}}">
                        FIN
                    </a>
                </li>
            {% else %}
                #_ 없을 경우 클릭 할 수 없게 막힘
                <li class="page-item disabled"><a class="page-link">NEXT</a></li>
                <li class="page-item disabled"><a class="page-link">FIN</a></li>
            {% endif %}
 
        </ul>
    </nav>
cs

 

 

 

 

3. 현재 페이지 버튼 클릭 할 수 없게 <templates> > <board> > 'index.html'

'index.html'

=====

1
2
3
4
5
6
7
{% for i in bset.paginator.page_range %}
    <a href="{% url 'index' %}?page={{i}}">
        <button {% if best.number == i %} disabled {% endif %}> 
            {{i}} 
        </button>
    </a>
{% endfor %}
cs

 

 

반응형