210509-TIL

$(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><button onclick="showStudyList(${page-1})" class="button">Prev</button></li>`
    }else to_html+=`<li><button onclick="showStudyList(1)" 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><button onclick="showStudyList(${page+1})" class="button">Next</button></li>`
    }else to_html+=`<li><button onclick="showStudyList(${totalPage})" class="button disabled">Next</button></li>`
    $('#pagination').append(to_html);
}