37일: js 객체를 이용한 Pagination

2022.01.04.Tue.

✍ 복습

js 객체를 이용한 Pagination

• .find() : 앞에 부모선택자로 범위를 좁힌다음 find안을 실행
• 현재페이지인 pageno가 2이기 때문에 2번에 active 설정이 됨.

설명

1. 사용자가 pageno를 어떻게 선택하게 할 건가>
005.html?pageno=11 legacy한 파라미터 -> location.search
005.html/11 REST방식의 파라미터
2. 서버에 $.ajax 요청을 보낸다
api 서버 주소 : http://sample.bmaster.kro.ko/contacts
method : get
data : pageno=[pageno]&pagesize=[PAGE_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보다 크면 다음으로 링크 출력

2번 추가 설명

• $.ajax({
  url : 주소,
  method: 'get' 또는 'post',
  data: urlencoded 파라미터,
  success: function() {
  }
  })

• get방식으로 주소만 보내는 경우 아래처럼 쓸 수 있다
  $.ajax({
  url : 주소,
  success: function() {
  // 이벤트 처리
  }
  })

• 만약 위 코드에서 success를 생략할 수 있다면
  $.ajax({
  url: 주소
  })
  -> url이 생략 불가능한 속성 -> 프로그래머가 생략하면 js가 url이 판단
  $.ajax({ 주소 })
  -> 중괄호는 한줄만 있을 때 생략 가능
  $.ajax(주소).done(function() { });
  $.ajax(주소).done(()=> {});
  

참고로 success 대신 done을, error 대신 fail을 사용 가능.

전체 코드 달달 외울 것

<script>
// 주소
// 004.html            이 경우는 수동으로 pageno는 1로 지정
// 004.html?pageno=1
const positionOfEqual = location.search.indexOf('=');

// locatio.search를 자른다. 
// 004.html을 바로 실행한 경우 빈문자열이다
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--;
    console.log(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;
    }

    // 0 1 5 6      1 2 6 7
   console.log({prev, startPage, endPage, next});
   return {prev, startPage, endPage, next};
}

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');
  console.log($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','004.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() {
 /*
  $.ajax('http://sample.bmaster.kro.kr/contacts?
                 pageno=2&pagesize=4').done(()=> { });

  $.ajax({
   url: 'http://sample.bmaster.kro.kr/contacts?
                                 pageno=2&pagesize=4',
   success:function() {
   }
  })
            */
  const url=
         'http://sample.bmaster.kro.kr/contacts?pageno='
          + pageno + '&pagesize=' + PAGE_SIZE;
  $.ajax(url).done((result)=> {
      const pagination = getPagination(result);    
      printContacts(result.contacts);
      printPagination(pagination);
  });
});
</script>
</head>
<body>
    <div id="page">
        <div id="list_div">
            <table class='table'>
                <thead>
                    <tr>
                        <th>번호</th>
                        <th>이름</th>
                        <th>주소</th>
                        <th>연락처</th>
                    </tr>
                </thead>
                <tbody id='list'>
                </tbody>
            </table>
        </div>
        <div id="pagination_div" 
                  style='text-align: center;'>
            <ul class="pagination">
            </ul>
        </div>
    </div>    
</body>