pagination.js

const zidellPagination = (baseUrl='#', pageNum=1, totalRecord=200, perPage=20, displayButtons=8) =>
{
  let totalPage = Math.ceil(totalRecord/perPage);
  
  let s = '<ul class="pagination">';
  let lis = [];
  
  // 맨 좌측의 페이지 번호를 구함
  let startPageNum = (Math.ceil(pageNum/displayButtons)-1) * displayButtons + 1;
  let endPageNum = startPageNum + displayButtons - 1;
  if(endPageNum > totalPage){
    endPageNum = totalPage;
  }
  
  for(i=startPageNum; i<=endPageNum; i++){
    lis.push('<li '+(i==pageNum?'class="active"':'')+'><a href="'+baseUrl+'?p='+i+'">'+i+'</a></li>');
  }
  pageNum = displayButtons;
  let targetPage;
  if(startPageNum > 1){ // prev
   targetPage = startPageNum - 1;
   lis.unshift('<li class="page-prev"><a href="'+baseUrl+'?p='+targetPage+'">'+(pageNum>1?'...':'')+' '+targetPage+'</a></li>');
   if(pageNum>1){
    lis.unshift('<li class="page-first"><a href="'+baseUrl+'?p=1">1</a></li>');
   }
  }
  if(totalPage > endPageNum){ // next
   targetPage = endPageNum + 1;
   if(totalPage - targetPage + 1 < displayButtons){
     pageNum = totalPage - targetPage +1;
   }
   lis.push('<li class="page-next"><a href="'+baseUrl+'?p='+targetPage+'">'+targetPage+' '+(pageNum>1?'...':'')+'</a></li>');
   if(pageNum>1){
     lis.push('<li class="page-last"><a href="'+baseUrl+'?p='+totalPage+'">'+totalPage+'</a></li>');
   }
  }
  
  s += lis.join('');
  s += '</ul>';
  return s;
}