[Django] 게시판 페이징 처리 - (2)

🔖  다시 돌아온 게시판 페이징 처리

저번보다 조금 발전한 페이징 처리! 1탄을 보고 오면 내가 얼마나 발전했는지 확인할 수 있다.

(￣▽￣)ノ 1탄 링크 : https://eunjuicyyyyyy.tistory.com/22

---

일단 완성본부터 ㅎㅎ ...

첫 페이지

중간 페이지

이번에는 html과 css 위주로 수정했다. 사실 html은 기능 하나만 더 추가했는데 css로 디자인을 좀 수정했더니 되게 많이 바뀐 것처럼 느껴진다.

 

 

💬 advancedlist.html

          <!-- 페이지네이션 부분 시작 -->
            <div class="pagination-container">
                <div class="pagination">
                <span class="step-links">
                    {% if page.has_previous %}
                        <a href="?page=1">&laquo; first</a>
                        <a href="?page={{ page.previous_page_number }}">←</a>
                    {% endif %}

                    <!-- 페이지 번호를 표시하는 부분 -->
                    {% for i in page.paginator.page_range %}
                    	<!-- 좌우로 페이지 번호 다섯 개 보여주는 부분 -->
                        {% if i >= page.number|add:-5 and i <= page.number|add:5 %}
                            {% if page.number == i %}
                                <span class="current-page">{{ i }}</span>
                            {% else %}
                                <a href="?page={{ i }}">{{ i }}</a>
                            {% endif %}
                        {% endif %}
                    {% endfor %}


                    {% if page.has_next %}
                        <a href="?page={{ page.next_page_number }}">→</a>
                        <a href="?page={{ page.paginator.num_pages }}">last &raquo;</a>
                    {% endif %}
                </span>
            </div>
            <!-- 페이지네이션 부분 끝 -->

추가된 기능 : 페이지 번호가 현재 페이지 기준으로 좌우 5개씩 보이도록 만든다. page.number보다 5만큼 크거나 작은 값만 표시되도록 만들었다. |add:-5 는 5만큼 빼라는 의미이고, |add:5 는 5만큼 더하라는 의미이다. 

 

좌우 5개씩 표시하는 페이징 기능

따라서 현재 페이지가 1 페이지면, 왼쪽에 더이상 페이지가 없기 때문에 오른쪽 5개만 표시한다. 반면 6 페이지를 선택하면 좌우로 각각 다섯 개씩 표시하는 것을 확인할 수 있다.

 

 

🖍️ css

/* 페이지네이션 컨테이너의 스타일 */
.pagination-container {
    text-align: center; /* 가운데 정렬 */
}

/* 페이지네이션 내용의 스타일 (optional) */
.pagination {
    display: inline-block; /* 인라인 요소로 표시하여 중앙 정렬 */
    margin: 15px; /* 원하는 여백 설정 */
}

/* 페이지 링크 스타일 (optional) */
.pagination a {
    text-decoration: none; /* 링크에 밑줄 제거 */
    padding: 3px 8px; /* 링크 내부 여백 설정 */
    margin: 2px; /* 링크 간격 설정 */
    border: 1px solid #ccc; /* 테두리 추가 */
    border-radius: 4px; /* 둥근 모서리 설정 */
    background-color: #f2f2f2; /* 배경색 설정 */
    color: #333; /* 글자색 설정 */
}

/* 현재 페이지 스타일 (optional) */
.pagination .current-page {
    padding: 3px 8px;
    margin: 2px;
    background-color: #28B463; /* 현재 페이지 배경색 설정 */
    color: #fff; /* 현재 페이지 글자색 설정 */
}