Ajax의 페이징 처리

Ajax로 페이징 처리하기

페이지를 넘길때 필요한 것 👆 검색 키워드, ✌ 페이지 넘버

JSON data를 배열로 만들어서 값을 주고 받으려 했으나 방법을 못찾아서 검색 키워드와 페이지 넘버를 합쳐서 넘기는 방법을 시도함

 

1️⃣ 현재 페이지와 다른 페이지 넘버 클릭시 페이지 비워주기

$(".about--banner").empty();

 

2️⃣ 검색 키워드와 페이지 넘버 합쳐서 변수로 선언하기

이때 두개를 분리하기 위한 키워드 설정해주기(ex. num_page)

let word = $("[name=word]").val()+"num_page"+$(this).val();

 

3️⃣ Ajax 요청하여 데이터 넘기기

$.ajax({
      type : 'POST',                                  
      url : 'http://127.0.0.1:5000/report',
      data : JSON.stringify(word),
      dataType : 'JSON',
      success : function(result){
        $(".about--banner").append(result)
      },
      error : function(xtr,status,error){
        $(".about--banner").append("<h3>데이터가 존재하지 않습니다.</h3>")
      }
    });

 

 

4️⃣ Json데이터를 str로 변경하고 

num_page로 두개를 분리하여 변수에 담기

만약 처음 검색했을 경우 default값 1

 word = request.get_json("word")
 if "num_page" in word:
 	result = word.split('num_page')
 	word = result[0]
 	page = int(result[1])
 else:
 	# 페이지 값 (디폴트값 = 1)
 	page = request.args.get("page", 1, type=int)

 

5️⃣ 페이지를 넘기기 위한 설정들 해주기

# 한 페이지 당 몇 개의 게시물을 출력할 것인가
limit = 10
# 한 페이지에 보여줄 내용 담기
datas = news[(page - 1) * limit:limit*page]
# 게시물의 총 개수 세기
tot_count = len(news)
# 마지막 페이지의 수 구하기
last_page_num = math.ceil(tot_count / limit) # 반드시 올림을 해줘야함
# 페이지 블럭을 5개씩 표기
block_size = 5
# 현재 블럭의 위치 (첫 번째 블럭이라면, block_num = 0)
block_num = int((page - 1) / block_size)
# 현재 블럭의 맨 처음 페이지 넘버 (첫 번째 블럭이라면, block_start = 1, 두 번째 블럭이라면, block_start = 6)
block_start = (block_size * block_num) + 1
# 현재 블럭의 맨 끝 페이지 넘버 (첫 번째 블럭이라면, block_end = 5)
block_end = block_start + (block_size - 1)

 

 

페이징 처리된 예시화면

 

---

 

❓ 생각해볼 것

JSON형식의 data를 여러개 넘기고 데이터를 가져올 수 있다면 더 쉽게 가능할 듯

(Spring에서는 net.sf.json.JSONArray를 import하여 JSON array를 가져왔음)