[jsp] 페이지네이션 하기

    //페이지네이션 버튼 만들기

    function btnMake(res, limit, currentPage) {

      let total_page = Math.ceil(res.length / limit); // 올림을 사용하여 전체 페이지 수 계산

      var oHtml = '';

      var startPage = Math.floor((currentPage - 1) / 5) * 5 + 1;

      var endPage = Math.min(startPage + 4, total_page);

   

      // 이전 버튼 추가

      if (startPage > 1) {

        oHtml += '<button class="pagination-btn" data-page="' + (startPage - 1) + '" type="button">이전</button>';

      }

   

      // 5개씩 페이지 버튼 생성

      for (var i = startPage; i <= endPage; i++) {

        oHtml += '<button class="pagination-btn" data-page="' + i + '" type="button">' + i + '</button>';

      }

   

      // 다음 버튼 추가

      if (endPage < total_page) {

        oHtml += '<button class="pagination-btn" data-page="' + (endPage + 1) + '" type="button">다음</button>';

      }

   

      $("#pagination").html(oHtml);

   

      // 페이지 버튼 클릭 이벤트 등록

      $(".pagination-btn").on("click", function () {

        var page = $(this).data("page");

        var startIndex = (page - 1) * limit;

        var endIndex = startIndex + limit;

        var currentPageData = res.slice(startIndex, endIndex);

        updateTable(currentPageData);

        // 페이지 버튼을 클릭할 때마다 현재 페이지를 인자로 전달하여 새로운 페이지 버튼을 생성

        btnMake(res, limit, page);

      });

    }

   

    //페이지네이션 버튼을 누르면 데이터 변경

    function updateTable(data) {

      $(this).parent().remove();

      var oHtml = '';

      $.each(data, function (i, v) {

        oHtml +=  `<tr><td><input id="123" type="checkbox" class="checkbox" /><label for="idCheck1" class="checkbox-label" onclick="ChangeCheckBox('idCheck1')">체크</label></td><td>${i}</td><td class="tl">${v.forbidden_word}</td></tr>`

      });

      $("#dataContent").html(oHtml);

    }