pagination

wontwopunch·2022년 1월 16일
0

TIL

목록 보기
28/80
post-thumbnail

주요 코드만

const positionOfEqual = location.search.indexOd('=');

// location.search를 자른다.
const param = location.search.substr(positionOfEqual+1);
let pageno = 1;
if(param!="") pageno = parseInt(param);
const PAGE_SIZE = 10;
const PAGE_PER_BLOCK = 5;

function getPagination(result) {
  const totalcount = result.totalcount;
  let countOfPage = Math.floor(totalcount/PAGE_SIZE)+1;
  if(totalcount%PAGE_SIZE)==0) countOfPage--;
  let blockNo = Math.floor(pageno/PAGE_PER_BLOCK);
  if(pageno%PAGE_PER_BLOCK==0) blockNo--;
  const startPage = (blockNo * PAGE_PER_BLOCK) +1;
  const prev = startPage -1;
  let endPage = (startPage + PAGE_PER_BLOCK) -1;
  let next = endPage +1;
  if(endPage>=countOfPage){
    endPage = countOfPage;
    next = 0
  }
  return {prev, startPage, endPage, enxt};
}

function printContacts(contacts) {
  const $list = $('#list');
  $.each(contacts, function(idx,contact){
    const $tr = $('<tr>').appendTo($list);
    $('<td>').text(contact.no).appendTo($tr);
    const $td = $('<td>').appendTo($tr);
    $('<a>').attr('href','#').text(contact.name).appendTo($td);
    $('<td>').text(contact.address).appendTo($tr);
    $('<td>').text(contact.tel).appendTo($tr);
  });
}

function printPagination(pagination){
  const $pagination = $('#pagination_div').find('.pagination');
  if(pagination.prev>0){
    const $prev = $('<li>').appendTo($pagination);
    $('<a>').attr('href','004.html?pageno = 
             '+pagination.prev).text('이전').appendTo($prev);
    }
  for(let i=pagination.startPage; i<pagination.endPage; i++){
    const $li = $('<li>').appendTo($pagination);
    if(pageno==i)
      $li.attr('class','active');
    $('<a>').attr('href','oo4.html?pageno='+i).text(i).appendTo($li);
  }
  if(pagination.next>0) {
    const $next = $('<li>').appendTo($pagination);
    $(<'a>').attr('href','004.html?pageno = 
             '+pagination.next).text('다음').appendTo($next);
    }
}

$(document).ready(function(){
  const url = 'https://sample.bmaster.kro.kr/contacts?pageno='
        + pageno + '&pagesize' + PAGE_SIZE;
  $.ajax(url).done((result)=>{
    const pagination = getPagination(result);
    printContacts(result.contacts);
    printPagination(pagination);
  });
});
  1. 사용자가 pageno를 어떻게 선택하게 할 것인가?
    legacy한 파라미터 → location.search
  2. 서버에 $.ajax 요청을 보낸다.
    api 서버 주소 : https://sample.bmaster.kro.kr/contacts
    method : get
    data : pageno=[pageno]&pagesize=[PAZE_SIZE]
    응답(result) : pageno, pagesize, totalcount, contacts 배열
    각 함수에 꼭 필요한 응답만 파라미터로 전달하겠다.
  3. 서버의 응답을 가지고 pagination을 계산한다.
    totalcount, pagesize(10) → countOfPage
    pageno, pagePerBlock(5) → blockNo
    blockNo, pagePerBlock → startpage → prev, endpage, next
    마지막 블록인 경우 endpage = countOfPage, next=0
  4. 서버의 응답을 가지고 주소를 출력한다.
    contacts에 반복문 적용
    no, name, address, tel을 tr에 appendTo한다.
    name의 경우 주소록을 볼 수 있는 링크를 건다.
  5. pagination을 출력한다.
    prev>0 → 이전으로 링크 출력
    startPage~endPage → li 출력
    next>0 → 다음으로 링크 출력
profile
프론트엔드 개발자

0개의 댓글