책 '점프 투 플라스크'를 공부하면서 정리한 내용입니다.
출처 : https://wikidocs.net/book/4542
게시물이 들어날 수록 한 화면에 표시할 게시물이 많아져 스크롤 바를 내려야 하는 불편함이 생기기 때문에 페이징 기능은 필수이다.
플라스크 셸을 이용해 페이징 테스트용 데이터 300개 생성
>>> from pybo import db
>>> from pybo.models import Question
>>> from datetime import datetime
>>> for i in range(300):
... q = Question(subject='테스트 데이터입니다:[%03d]' % i, content='내용무', create_date=datetime.now())
... db.session.add(q)
...
>>> db.session.commit()
_list 함수에 페이징 기능 적용
@bp.route('/list/')
def _list():
# --------------------------------- [edit] ---------------------------------- #
page = request.args.get('page', type=int, default=1) # 페이지
# --------------------------------------------------------------------------- #
question_list = Question.query.order_by(Question.create_date.desc())
# --------------------------------- [edit] ---------------------------------- #
question_list = question_list.paginate(page, per_page=10)
# --------------------------------------------------------------------------- #
return render_template('question/question_list.html', question_list=question_list)
다음과 같은 GET 방식으로 요청한 URL에서 page값 5를 가져올 때 사용한다.
localhost:5000/question/list/?page=5
URL에 page값이 없으면 default=1을 자동으로 적용해 기본값 1이 설정되고, type=int는 page 매개변수의 자료형이 정수임을 의미한다.
템플릿에서 사용하는 question_list가 Pagination 객체로 변경되었으므로 .items를 추가하는 방식으로 수정
현재 조회된 질문목록 데이터’를 가져오려면 items 함수를 호출
{% for question in question_list.items %}
기본값이 page=1에 의해 첫 번째 페이지가 10개의 목록을 출력하는 것을 볼 수 있다.
<!-- 페이징처리 시작 -->
<ul class="pagination justify-content-center">
<!-- 이전페이지 -->
{% if question_list.has_prev %}
<li class="page-item">
<a class="page-link" href="?page={{ question_list.prev_num }}">이전</a>
</li>
{% else %}
<li class="page-item disabled">
<a class="page-link" tabindex="-1" aria-disabled="true" href="#">이전</a>
</li>
{% endif %}
<!-- 페이지 리스트를 돌면서 해당 페이지로 이동할 수 있는 링크 -->
{% for page_num in question_list.iter_pages() %}
{% if page_num %}
{% if page_num != question_list.page %}
<li class="page-item">
<a class="page-link" href="?page={{ page_num }}">{{ page_num }}</a>
</li>
{% else %}
<li class="page-item active" aria-current="page">
<a class="page-link" href="#">{{ page_num }}</a>
</li>
{% endif %}
{% else %}
<li class="disabled">
<a class="page-link" href="#">...</a>
</li>
{% endif %}
{% endfor %}
<!-- 다음페이지 -->
{% if question_list.has_next %}
<li class="page-item">
<a class="page-link" href="?page={{ question_list.next_num }}">다음</a>
</li>
{% else %}
<li class="page-item disabled">
<a class="page-link" tabindex="-1" aria-disabled="true" href="#">다음</a>
</li>
{% endif %}
</ul>
<!-- 페이징처리 끝 -->
부트스트랩 pagination 컴포넌트 공식 문서: getbootstrap.com/docs/4.5/components/pagination
생략 기능까지 완벽한 paginate 함수
iter_pages 함수로 페이지가 나열될 때 페이지 번호(page_num)가 없는 경우 '...'를 표시. 보여줄 페이지 번호가 지나치게 많은 경우 현재 페이지 위주로 보여주는 기술.