TIL 200307

1. 오늘

페이지네이션을 완성했다. 하지만 개선의 여지가 많이 남았다.

$.ajax({
          type:"GET",
          url: "/all_games_info?platform=" + platform + "&sort=" + sort + "&order=" + order + "&page=0",
          data: {},
          success : function(response){
            console.log('page_ajax_good');#해당요청이 성공했는지 확인
            var max_game_data = response['result'].length;
#전체 데이터의 수 확인
            var max_page = Math.ceil(max_game_data/16)
#전체 데이터를 페이지당 표시하는 데이터 수인 16으로 나누어 최대페이지값 체크

            for (i=1; i < max_page+1; i++){
              $('.pagination').append("<li class=" + "\'page_item\'" + "><a class =" + "\'page-link\'" + "onclick=" + "\'change_page(" + i +")\'" + ">" + i + "</a></li>")
            }
#최대페이지수만큼 루프문에서 append를 사용한 페이지 링크버튼 추가

          }
        })

• 해당 ajax요청은 데이터를 출력해주는 ajax요청의 success 구간에 삽입되었다. ajax의 비동기식 요청에 순서를 주기 위함이다.

2. 오류 및 필요수정사항

• 플랫폼별로 데이터를 드러내는데에는 문제가 없으나, 모든플랫폼 요청시에는 문제가 발생한다.
  

• 위 스크린샷은 유플레이 판매기준 페이지인데 총 페이지가 1개이므로 최대페이지가 1까지 출력될 수 있음을 볼 수 있다.
  

• 위 스크린샷은 모든페이지 최저가 기준정렬 page=10이다
  

• 같은 페이지의 page=11이다.

• 위와 같이 총 페이지가 10임에도 불구하고 19까지 생성되었다.

• 또한 현재 페이지를 표시해주는 disable 클래스의 추가가 필요하다.

• 이전페이지와 다음페이지를 표시해주는 버튼이 필요하다

• 모든 페이지를 출력하는 것이 아닌, 현재페이지를 포함한 5개의 버튼만 출력되도록 해야한다.e.g.)1,2,3,4,5 / 4,5,6,7,8 / 2,3,4,5,6(마지막페이지)