페이징 기능이 제일 막막했다. 설계상 딱히 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 함수를 바인딩하여 클릭할때마다 해당 함수가 실행되도록 하였다.
실행 결과물
잘 나온다.