페이지네이션 javascript

 

 

drf PageNumberPagination

 

http://127.0.0.1:8000/?page=1

 

 

window.onload = function () {

    handleShow()
}


async function handleShow() {

    const response = await fetch(`${BACKEND_API}/api/article/`, {
        method: 'GET',
    })

    const response_json = await response.json()

    const count = response_json.article.count
    const all_page = parseInt(count/4) +1
    const page_num = response_json.article.next.substr(-1) -1    
    const pre_page = 1
    const next_page = page_num +1

    if (count < 5) {
        const pagesection = document.getElementById('pagesection')
        pagesection.remove();
    } else {
        pagination.innerHTML += `<li class="page-item">
                                    <a id="page_item_pre" class="page-link" aria-label="Previous" onclick="PageShow(${pre_page})">
                                    <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                <li class="page-item"><a class="page-link">${page_num} / ${all_page}</a></li>
                                <li class="page-item">
                                    <a id="page_item_next" class="page-link" aria-label="Next" onclick="PageShow(${next_page})">
                                    <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>`
    }

    articleView(response_json.article)
}

 

previous나 next 페이지가 null인 경우는 콘솔 에러가 떠서

 

경우에 따라 나눠주었다

 

async function PageShow(num) {

    const response = await fetch(`${BACKEND_API}/api/article/?page=${num}`, {
        method: 'GET',
    })

    const response_json = await response.json()

    const count = response_json.article.count
    const all_page = parseInt(count/4) +1
    
    let page_num = 0 
    let pre_page = 0
    let next_page = 0
    if (response_json.article.previous == null) {
        page_num = 1
        pre_page = 1
        next_page = 2
    } else if (response_json.article.next == null) {
        page_num =  all_page
        pre_page = page_num -1
        next_page = all_page
    } else {     
        page_num = response_json.article.next.substr(-1) -1    
        pre_page = page_num -1
        next_page = page_num +1
    }

    pagination.innerHTML = `<li class="page-item">
                                <a id="page_item_pre" class="page-link" aria-label="Previous" onclick="PageShow(${pre_page})">
                                <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li class="page-item"><a class="page-link">${page_num} / ${all_page}</a></li>
                            <li class="page-item">
                                <a id="page_item_next" class="page-link" aria-label="Next" onclick="PageShow(${next_page})">
                                <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>`    

    category_content.innerHTML =''

    articleView(response_json.article)
}

 

function articleView(response_json){
    let a = 0
    response_json.results.forEach((e) => {
        const backendUrl = 'http://127.0.0.1:8000'; // Replace with your backend URL
        category_content.innerHTML += `<div class='col'>
            <div class='card h-100'>
                <img src='${backendUrl}${e.image}' class='card-img-top'>
                <div class="progress-edge" id='progress${a}'>
                </div>
                <div class='card-body'>
                    <h5 class='card-title'>제목: ${e.title}</h5>
                    <p class='card-text'> 상품: ${e.product} </p>
                    <h5 class='card-title' id='bid${a}'>현재가: ${e.bid}</h5>
                </div>
                <button type='button' class='btn btn-success' onclick='OpenDetailArticle(${e.id})'>보러가기</button>
                <div class='card-footer'>
                    <small class='text-body-secondary'><span id='finish-time${a}'>${elapsedTime(e.finished_at)}</span></small>
                </div>
            </div>
        </div>`

        if (e.progress === true)
        {
            document.querySelector(`#progress${a}`).innerHTML = `<span class='badge rounded-pill text-bg-success'>진행중</span>`;
        } else {
            document.querySelector(`#progress${a}`).innerHTML = `<span class='badge rounded-pill text-bg-danger'>종료</span>`;
        };

        if (e.bid === undefined)
        {
            document.querySelector(`#bid${a}`).textContent = '입찰없음';
        }

        a++;
        }
    )
}

 

parseInt(string)
parseInt(string, radix)

 

string : 파싱할 값

 

그 값을 파싱하여 정수나 NaN으로 반환해준다

 

radix : string의 진수를 나타내는 2부터 36까지의 정수

 

10은 10진수, 8은 8진수, 16은 16진수 등등

 

body: JSON.stringify({
  point: parseInt(point.value, 10),
}),