Template - 검색 결과 내 페이지네이션

 

Django로 미니 프로젝트를 만들면서 MVC이 아닌 MVT 패턴을 활용하여 View에서 만든 로직을 Template을 활용해서 화면을 그려보고있는데, 개인적으로 어려웠던 (?) 부분을 정리해본다.

 

 

 

 

문제 발생

 

특정 키워드 검색 시 나오는 게시글들이 6개가 넘으면 페이지 네이션 적용이 되게끔 코드를 작성했는데,

다음 페이지로 넘어갈 때 키워드 검색 결과가 없어짐

 

→ Desktop\hyj\board\views.py

def search_post(request):
     
    key_word  = request.GET.get('key_word','')
    post_list = Post.objects.all().order_by('-id')
    key_word  = unquote(key_word)
    search_post_list = []
    
    if key_word:
        search_post_list = post_list.filter(
            Q(title__icontains = key_word) | 
            Q(content__icontains = key_word)
        ).distinct()
        
    paginator   = Paginator(search_post_list, 6)
    page_number = request.GET.get('page')
    page_obj    = paginator.get_page(page_number)
    
    # 키워드를 포함한 페이지 링크 생성
    search_params = urlencode({'key_word': key_word})
    page_links = [
        f"?{search_params}&page={page_number}" if key_word else f"?page={page_number}"
        for page_number in page_obj.paginator.page_range
    ]
    
    context = {
        'key_word' : key_word,
        'search_post_list' : page_obj,
        'page_links' : page_links
    }
            
    return render(request, 'board/search.html',  context)

→ Desktop\hyj\templates\board\search.html

{% if search_post_list %}
        <div class="paging-button">

            <ul class="pagination justify-content-center">  
            
                <!--검색결과 있을 때-->
                <!-- 이전페이지 -->
                
                {% if search_post_list.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="page={{ search_post_list.previous_page_number }}">이전</a>
                    </li>
                {% else %}
                    <li class="page-item disabled">
                        <a class="page-link" tabindex="-1" aria-disabled="true" href="#">이전</a>
                    </li>
                {% endif %}
                
                <!-- 페이지리스트 -->
                
                {% for page_number in search_post_list.paginator.page_range %}
                	{% if page_number >= search_post_list.number|add:-5 and page_number <= search_post_list.number|add:5 %}
                        <li class="page-item active" aria-current="page">
                            <a class="page-link" href="?page={{ page_number }}">{{ page_number }}</a>
                        </li>
                    {% else %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_number }}">{{ page_number }}</a>
                        </li>
                    {% endif %}
                {% endfor %}
                
                <!-- 다음페이지 -->

                {% if search_post_list.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ search_post_list.next_page_number }}">다음</a>
                    </li>
                {% else %}
                    <li class="page-item disabled">
                        <a class="page-link" tabindex="-1" aria-disabled="true" href="#">다음</a>
                    </li>
                {% endif %}
                
            </ul>
            
            <!-- 페이징처리 끝 -->

        </div>
{% else %}
    <div>
    </div>
{% endif %}

 

 

 

해결 방법

 

views.py 코드 내 문제가 아니기 때문에 search.html 템플릿 페이지 처리 부분만 수정

 

코드 내 '페이지 리스트' 주석 부분에 if문 {% if page_number == search_post_list.number %} 을 추가하여 현재 페이지가 검색 결과 페이지 번호와 일치하는지 확인 후, 페이지 번호를 클릭할 경우 'href' 속성에 key_word를 추가하여 href="?key_word={{ key_word }}&page={{ page_number }}" 해당 페이지 번호와 검색 키워드를 포함한 url을 생성한다. 

 

 

수정 코드

→ Desktop\hyj\templates\board\search.html

            <!-- 페이지리스트 -->
            {% for page_number in search_post_list.paginator.page_range %}
                {% if page_number >= search_post_list.number|add:-5 and page_number <= search_post_list.number|add:5 %}
                    {% if page_number == search_post_list.number %}
                        <li class="page-item active" aria-current="page">
                            <a class="page-link" href="?key_word={{ key_word }}&page={{ page_number }}">{{ page_number }}</a>
                        </li>
                    {% else %}
                        <li class="page-item">
                            <a class="page-link" href="?key_word={{ key_word }}&page={{ page_number }}">{{ page_number }}</a>
                        </li>
                    {% endif %}
                {% endif %}
            {% endfor %}

 

✨ 수정 후 view

 

 

 

❗ 이 부분은 html 기본 문법(?) 부분으로 간단하게 처리할 수 있는 부분이었다. 코드를 하나씩 주석처리 해보면서 어느 부분에서 어떻게 작동하는지 알게되었으니 추후 더 복잡한 코드에도 큰(?) 문제 없이 적용할 수 있을 것 같다.