반응형
페이지를 이동해봐도 게시물 번호는 1부터 시작합니다. 첫번째 페이지 마지막 게시물이 번호 1번??
정상대로라면 마지막 페이지가 1번을 가져야 할텐데요 그걸 수정해보도록 하겠습니다.
게시물 번호 공식을 이용해 만들어보겠습니다.
번호 = 전체 게시물 개수 - (현재 페이지 -1) * 페이지당 게시물 개수 - 나열 인덱스
총 18개 게시물에 현재페이지가 1페이지이고 페이지당 개시물이 10개일시
18 - (1 - 1) * 10 = 18 입니다.
가장 위에 있는 부분이 먼저 만들어집니다.
여기서 예를 들자면 저 빨간색 부분이 먼저 만들어지고 파란색이 그 뒤에 만들어지죠
그러니까 빨간색이 인덱스 0 그 뒤에 인덱스 1이 되는 것입니다.
그러면 18 - 0 = 18 이 빨간 부분 게시물 번호가 될테고 18 - 1 = 17 이 파란 부분 게시물 번호가 되는 것입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{% extends 'base.html' %}
{% block content %}
<div class="container my-3 text-center">
<table calss="table" width="100%">
<thead >
<tr class="bg-dark text-white">
<th> 번호 </th>
<th> 제목 </th>
<th> 작성일시 </th>
</tr>
</thead>
<tbody>
{% if question_list %}
{% for question in question_list.items %}
<tr>
<td>{{ question_list.total - ((question_list.page-1) * question_list.per_page) - loop.index0 }}</td>
<td><a href="{{ url_for('question.detail', question_id=question.id) }}">{{question.subject}}</a></td>
<td>{{ question.create_date|datetime }}</td>
</tr>
{% endfor %}
{% else %}
<tr>
<td colspan="3"> 질문이 없습니다. </td>
</tr>
{% endif %}
</tbody>
</table>
<!-- 페이징 -->
<nav aria-label="Page navigation example">
<ul class="pagination pagination-sm my-5 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" 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>
</nav>
</ul>
<a href="{{ url_for('question.create') }}" class="btn btn-primary"> 질문 등록하기 </a>
</div>
{% endblock %}
</body>
</html>question_list.html 입니다.
<td>{{ question_list.total - ((question_list.page-1) * question_list.per_page) - loop.index0 }}</td>
반응형
'플라스크 (추후 수정)' 카테고리의 다른 글
| Flask 회원가입기능 추가 generate_password_hash, query.filter_by (0) | 2021.08.15 |
|---|---|
| Flask 질문에 달린 답변 개수 표시하기 (0) | 2021.08.14 |
| Flask 필터 적용하기 strftime, jinja_env.filters (0) | 2021.08.14 |
| Flask 페이징 (0) | 2021.08.14 |
| Flask Navbar 적용, {% include %} (0) | 2021.08.12 |