장고:검색기능 편집하기 (부분)

==페이징==
그런데, 검색을 하고 나면... 페이징기능이 제대로 되먹지가 않는다; 검색에서 사용한 다양한 변수들이 전달되지 않기 때문인데, 2가지 선택지가 있다.

#페이징 버튼을 form으로 바꾸어 hidden으로 각 변수들을 보내기.
#JS를 이용하여 페이징버튼이 눌릴 때 form 안의 내용도 함께 제출되게끔 하기.

페이징버튼마다 form을 만드는 건 굉장히 번거롭고, form 안의 내용이 바뀔 때마다 페이징 버튼에 대해 일일이 바꿔주어야 하는 불편함이 있다. 때문에 2번 방법을 사용한다.

===탬플릿 수정===

====폼에 page정보 추가====
멀리 떨어진 form을 제출해야 하는데, 나는 그 방법은 모르겠다;; 하여, 기존 form 안에 다음을 추가한다.(page정보를 form에 담아 보내기 위해)<syntaxhighlight lang="html+django">
<input type="hidden" id="page" name="page" value="{{ page }}">
</syntaxhighlight>

====페이지버튼 변형하기====
자바스크립트에서 작동시키기 위해 페이지버튼의 구성을 바꾼다.

위의 형태에서 아래의 형태로.<syntaxhighlight lang="html+django">
<a class="page-link" href="?page={{ page_number }}">{{ page_number }}</a>

<a class="page-link" data-page="{{ page_number }}" href="#">{{ page_number }}</a>
</syntaxhighlight><br />

===자바스크립트===
페이지 정보도 같이 제출되게끔 페이지정보를 form 안에 hidden 필드로 넣고 진행한다.<syntaxhighlight lang="javascript+django">
<!--페이지 버튼을 누르면 페이지 정보와 함께 검색폼의 내용도 제출되게끔. searchForm 안의 hidden으로 page를 넣는다.-->
<script type='text/javascript'>
$(document).ready(function(){
    $(".page-link").on('click', function() {    // page-link 클래스를 가진 버튼이 클릭되면
        $("#page").val($(this).data("page"));   // 해당 값을 page에 담고.
        $("#searchForm").submit();              // searchForm 안의 페이지에 담아 제출한다.
    });

// 검색버튼 클릭할 경우, 페이지번호를 받지 못하므로, 값을 넣어주어야 한다.
    $("#btn_search").on('click', function() {
        $("#page").val(1);  // 검색버튼을 클릭할 경우 1페이지부터 조회한다.
        $("#searchForm").submit();
    });
});
</script>
</syntaxhighlight>