JS | django pagination | 장고 페이지네이션 |

• 콘솔, print를 사용해서 오는정보를 하나씩 찍어보고 어떻게 사용할지 생각하는 습관
• JS로 정보를 사용하는 방법

자바스크립트는 필요한 부분만 검색해서 만들고 있기때문에 많은 오류가 있을 수 있지만 내가원하는 결과물을 만들어 내긴 했다.

  <script>



    const hostUrl = 'http://127.0.0.1:8000'

    window.onload = function loadStudy(){
        const mainWrap = document.getElementById('main-wrap');

        $.ajax({
            type: 'GET',

            data: {},
            headers : {
              "Authorization" : "Bearer " + localStorage.getItem("access"),
            },

            url: `http://127.0.0.1:8000/studies/`,

            success: function (result) {
                console.log('성공:', result);
              
                let allTemp = ``
                for(var i = 0; i < result['results'].length; i++){
                    var study = result['results'][i]
                    console.log(study)
                    var temp = `
                        <div class="mb-3 col-md-4 col-sm-6 p-2" style="cursor: pointer;">
                            <div id="study" style="background-color: white; border-radius : 5px" onclick="viewStudy(${study.id})">
                                <img src="${hostUrl}${study.thumbnail_img}" type="button" class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">${study.title}</h5>
                                    <p class="text-start text-second">
                                        ${study.user} </br>
                                        <i class="fas fa-user-alt"></i> ${study.now_cnt}/${study.headcount}</br>
                                        <span><i class="fas fa-tags"></i> ${study.tags}</span></br>
                                    </p>
                                </div>
                            </div>
                            <div>
                          </div>
                        </div>

                    `
                    allTemp += temp
                }
                $('#main-wrap').html(allTemp)
                $('#next').attr('onclick',`page("${result.next}")`)
                $('#previous').attr('onclick',`page("${result.previous}")`)           
                //  http://127.0.0.1:8000/studies/?page=2
            },
            
        });
    }




    function page(page){
      console.log(page);
        const mainWrap = document.getElementById('main-wrap');

        $.ajax({
            type: 'GET',

            data: {},
            headers : {
              "Authorization" : "Bearer " + localStorage.getItem("access"),
            },

            url: page,

            success: function (result) {
                console.log('성공:', result);
              
                let allTemp = ``
                for(var i = 0; i < result['results'].length; i++){
                    var study = result['results'][i]
                    console.log(study)
                    var temp = `
                        <div class="mb-3 col-md-4 col-sm-6 p-2" style="cursor: pointer;">
                            <div id="study" style="background-color: white; border-radius : 5px" onclick="viewStudy(${study.id})">
                                <img src="${hostUrl}${study.thumbnail_img}" type="button" class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">${study.title}</h5>
                                    <p class="text-start text-second">
                                        ${study.user} </br>
                                        <i class="fas fa-user-alt"></i> ${study.now_cnt}/${study.headcount}</br>
                                        <span><i class="fas fa-tags"></i> ${study.tags}</span></br>
                                    </p>
                                </div>
                            </div>
                            <div>
                          </div>
                        </div>

                    `
                    allTemp += temp
                }
                $('#main-wrap').html(allTemp)
                $('#next').attr('onclick',`page("${result.next}")`)
                $('#previous').attr('onclick',`page("${result.previous}")`)

            },
            
        });
    }

게시물이 4개씩 페이지가 나누어져있다.

pagination이 되어있는 json을 받아서 사용하는데 next와 previous를 어떻게 사용할지 몰라서 정말 애먹었다. 계획을 짜고 데이터가 어떻게 흘러가는지 공부하고나서 속성을 바꿔주는 js attr 기능을 이용해서 버튼의 url을 바꿔주는 코드를 짰다. 이 프로젝트를 계기로 DRF 와 CRUD를 이해하고 JSON데이터를 어떻게 사용하는지 어떤식으로 통신을 하는지 알게되었다.