210509-TIL

김예지·2021년 5월 9일
0

페이징 기능이 제일 막막했다. 설계상 딱히 URL redirect(localhost:5000/study?page=4처럼)를 사용하는 것도 아니고, 어떤식으로 구현해야 우리 프로젝트에 맞는지 고민했다.
결과는 페이지 넘버를 넘기면 해당 페이지에 들어갈 데이터를 서버에서 알아서 계산해서 처리해준다고 가정, 프론트에서는 함수로 페이지 전환 구현만 했다.
다음은 소스코드

$(document).ready(function () {
            showStudyList(1);
});

function showStudyList(pageNum) {
  var data=getPageData(pageNum);
  $('#card-box').empty();
  for (var i = 0;i < 9;i++){
  	var to_html = `받은 데이터를 토대로 카드박스 내용 각각 만들어서 넣기`
  	$('#card-box').append(to_html)
  }
}

function getPageData(page){
	//여기에 페이지 수를 넘기면 게시물을 반환하는 API 작성
	pagination(page,100);//전체 게시물 갯수 또한 계산을 위해 필요하다
}

function pagination(page, totalCount){
    $('#pagination').empty();
    // page : 현재 페이지, totalCount :  전체 게시물 갯수
    var countList=9; //한 페이지에 출력될 게시물 수
    var countPage=7; //한 화면에 출력될 페이지 수
    var totalPage = parseInt(totalCount / countList);
    var to_html=``;
    if (totalCount % countList > 0) {
        totalPage++;
    }
    if (totalPage < page) {
        page = totalPage;
    }
    var startPage = (parseInt((page-1)/countPage))*countPage+1;
    var endPage = startPage + countPage - 1;
    if (endPage > totalPage) {
        endPage = totalPage;
    }
    if (page > 1) {
        to_html+=`<li><buttontoken interpolation">${page-1})" class="button">Prev</button></li>`
    }else to_html+=`<li><button class="button disabled">Prev</button></li>`

    for (var iCount = startPage; iCount <= endPage; iCount++) {
        if (iCount == page) {
            to_html+=`<li><a href="javascript:showStudyList(${iCount})" class="page active">${iCount}</a></li>`
        } else {
            to_html+=`<li><a href="javascript:showStudyList(${iCount})" class="page">${iCount}</a></li>`
        }
    }
    if (page < totalPage) {
        to_html+=`<li><buttontoken interpolation">${page+1})" class="button">Next</button></li>`
    }else to_html+=`<li><buttontoken interpolation">${totalPage})" class="button disabled">Next</button></li>`
    $('#pagination').append(to_html);
}

각각의 페이지 버튼에 Javascript:showStudyList 함수를 바인딩하여 클릭할때마다 해당 함수가 실행되도록 하였다.
실행 결과물

잘 나온다.

profile
새싹

0개의 댓글