페이지네이션

페이지네이션

1️⃣ 페이징 처리를 위해 한 페이지에 보여줄 게시물 설정하기

@app.route("/report", methods =['POST'])
def report():
    word = request.get_json("word")  #json data를 가져오기
    if word:
        word = word.lower()
        existingNews = db.get(word)
        if existingNews:
            # 페이지 값 (디폴트값 = 1)
            page = request.args.get("page", 1, type=int)
            # 한 페이지 당 몇 개의 게시물을 출력할 것인가
            limit = 10

            news = existingNews
            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)
        else:
            # 페이지 값 (디폴트값 = 1)
            page = request.args.get("page", 1, type=int)
            # 한 페이지 당 몇 개의 게시물을 출력할 것인가
            limit = 10

            # 뉴스 기사 가져오기
            naver_news = get_naver_news(word)
            hankyung_news = get_hankyung_news(word)
            news = naver_news + hankyung_news
            db[word] = news

            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)

    else:  # 검색어를 입력하지 않은 경우 redirect시키기
        return redirect("/")  
    return jsonify(render_template(
        "report.html", 
        searchingBy=word, 
        resultNumber=len(news),
        news=news,
        datas=datas,
        limit=limit,
        page=page,
        block_start=block_start,
        block_end=block_end,
        last_page_num=last_page_num
    ))

 

2️⃣ html에서 페이징 처리

<h3 style="display: inline-block; margin-top: 0;">Found {{resultNumber}} results for: {{searchingBy}}</h3>
<a href="/export?word={{searchingBy}}" style="background-color: #0F33FF; border: none; float: right; padding: 5px 10px;">Export to CSV</a>
<section>
    <h4 class="item1">Title</h4>
    <h4 class="item2">Company</h4>
    <h4 class="item3">Date</h4>
    <h4 class="item4">Link</h4>
    {% for result_news in datas %}
      <span class="item1">{{result_news.title}}</span>
      <span class="item2">{{result_news.company}}</span>
      <span class="item3">{{result_news.date}}</span>
      <a class="item4" href="{{result_news.link}}" target="_blank">Go to page</a>
    {% endfor %}

  <!-- 페이지네이션을 위한 코드 시작 -->
  {% if block_start - 1 > 0 %}
    <a href="{{url_for('report', page=block_start - 1)}}">[이전]</a>
  {% endif %}

  {% for i in range(block_start, block_end + 1)%}
      <!-- 데이터가 존재하지 않는 페이지는 화면에 나타내지 않기 위한 조건문 -->
      {% if i > last_page_num %}

      {% else %}
          {% if i == page %}
              <b>{{ i }}</b>
          {% else %}
              <a href="{{url_for('report', page=i)}}">{{ i }}</a>
          {% endif %}
      {% endif %}
  {% endfor %}

  {% if block_end < last_page_num %}
      <a href="{{url_for('report', page=block_end + 1)}}">[다음]</a>
  {% endif %}
  <!-- 페이지네이션을 위한 코드 끝 -->
</section>