점프 투 장고 3-16 답변 페이징 -2

github 주소 :https://github.com/wkdtpzld/again/tree/57c58fc888c200f32214ba33238533bbb721b69e

GitHub - wkdtpzld/again

<h5 class="border-bottom my-3 py-2">{{question.answer_set.count}}개의 답변이 있습니다.</h5>
    
    <div class='row justify-content-bteween my-3'>
        <div class='col-2'>
            <select class='form-control so'>
                <option value='recommend' {% if so == 'recommend' %}selected{% endif %}>추천순</option>
                <option value='recent' {% if so == 'recent' %}selected{% endif %}>최신순</option>
            </select>
        </div>
        <div class='col-4 input-group'>
            <input type='text' class='form-control kw' value='{{ kw|default_if_none:'' }}'>
            <div class='input-group-append'>
                <button class='btn btn-outline-secondary' type='button' id='btn_search'>찾기
            </div>
        </div>
    </div>
    
    {% for answer in answer_list %}

templates/pybo/question_detail

 

for in 문 위쪽에 추천과 최신순으로 필터링 할 수 있는 코드를 적어놨다.

so = select 옵션

kw = textinput 옵션

으로 구별이 되어있다.

 

endblock 위쪽에 searchForm를 적어 GET방식을 요청할 수 있게 하였다.

<form id='searchForm' method='get' action='{% url 'pybo_site:detail' question.id %}'>
    <input type='hidden' id='kw' name='kw' value='{{ kw|default_if_none:'' }}'>
    <input type='hidden' id='page' name='page' value="{{ page }}">
    <input type='hidden' id='so' name='so' value="{{ so }}">
</form>

또한 

{% if answer_list.has_previous %}
                <li class='page-item'>
                <a class='page-link'  data-page="{{ answer_list.previous_page_number }}" href='#'>이전</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 answer_list.paginator.page_range %}
            {% if page_number >= answer_list.number|add:-5 and page_number <= answer_list.number|add:5 %}
                {% if page_number == answer_list.number %}
                <li class='page-item active' aria-current='page'>
                    <a class='page-link'  data-page="{{ page_number }}" href='#'>{{ page_number }}</a>
                </li>
                {% else %}
                <li class='page-item'>
                    <a class='page-link'  data-page="{{ page_number }}" href='#'>{{ page_number }}</a>
                </li>
                {% endif%}
            {% endif %}
            {% endfor %}
            {% if answer_list.has_next %}
            <li class='page-item'>
                <a class='page-link'  data-page="{{ answer_list.next_page_number }}" href='#'>다음</a>
            </li>
            {% else %}
            <li class='page-item disabled'>
                <a class='page-link' tabindex='-1' aria-disabled='true' href='#'>다음</a>
            </li>
            {% endif %}

 

href 속성에 직접 입력을 삭제하고 data-page 속성을 적어놨다.

$('.page-link').on('click',function(){
        $('#page').val($(this).data('page'));
        $('#searchForm').submit();
    });
    $('#btn_search').on('click',function(){
        $('#kw').val($('.kw').val());
        $('#page').val(1);
        $('#searchForm').submit();
    });
    $(".so").on('change', function() {
        $("#so").val($(this).val());
        $("#page").val(1);
        $("#searchForm").submit();
    });

자바 스크립트에 검색 스크립트를 설정해놓았다. 본인은 자바스크립트를 잘 다룰줄 모르므로 도움을 요청했다.

 

html를 끝냈으면 M - T - V인 v로 이동

 

views.py의 detail을 변경

def detail(request,question_id):

    question = get_object_or_404(Question,pk=question_id)

    page = request.GET.get('page','1')
    kw = request.GET.get('kw','')
    so = request.GET.get('so','recommend')

    if so == 'recommend':
        answer_list=Answer.objects.filter(question=question).annotate(num_voter=Count('voter')).order_by('-num_voter','-create_date')
    elif so == 'recent':
        answer_list=Answer.objects.filter(question=question).order_by('-create_date')

    if kw:
        answer_list = answer_list.filter(
            Q(content__icontains=kw) |
            Q(author__username__icontains =kw) 
        ).distinct()

    paginator = Paginator(answer_list, 3)
    page_obj = paginator.get_page(page)


    context = {'question':question,'answer_list':page_obj,'page':page, 'kw':kw, 'so':so}

    return render(request, 'pybo/question_detail.html',context)

기존에 있던 index와 유사하다. 다른점이라면 답변 링크의 초기 설정이 recommend로 설정되어있다.

 

서버 가동

추천순으로 잘 나온다.

개인적으로 한 내용을 적는 내용이라 설명에 문제가 많은 것 같다. 죄송쓰