10분 만에 하는 초 속임수 페이지네이션 처리(paging 페이징처리)

스크립트

    var itemsPerPage1 = 10; // 한 페이지당 표시할 열의 수
    var currentPage1 = 1; // 현재 페이지
    var totalRows1 = $("table#allTable tbody tr").length; // 전체 행 수
    var totalPages1 = Math.ceil(totalRows1 / itemsPerPage1); // 전체 페이지 수

    // 초기 페이지 업데이트
    updatePage1();
    // 이전 페이지로 이동
    $("#prevPage1").on("click", function() {
        if (currentPage1 > 1) {
            currentPage1--;
            updatePage1();
        }
    });

    // 다음 페이지로 이동
    $("#nextPage1").on("click", function() {
        if (currentPage1 < totalPages1) {
            currentPage1++;
            updatePage1();
        }
    });

    // 페이지 번호들을 동적으로 생성
    function generatePageNumbers1() {
        $("#pagination1 li.page-number1").remove(); // 기존 페이지 번호 제거

        for (var i = 1; i <= totalPages1; i++) {
            var pageLink = $("<li class='page-item page-number1'><a class='page-link' href='#'>" + i + "</a></li>");
            if (i === currentPage1) {
                pageLink.addClass("active");
            }
            pageLink.insertBefore($("#nextPage1"));
        }

        // 페이지 번호 클릭 시 해당 페이지로 이동
        $(".page-number1 a").on("click", function() {
            currentPage1 = parseInt($(this).text());
            updatePage1();
        });
    }

    // 페이지를 업데이트하고 테이블을 다시 그리는 함수
    function updatePage1() {
        var startIndex = (currentPage1 - 1) * itemsPerPage1;
        var endIndex = startIndex + itemsPerPage1;

        // 모든 행을 숨김
        $("table#allTable tbody tr").hide();

        // 현재 페이지의 행만 표시
        $("table#allTable tbody tr").slice(startIndex, endIndex).show();

        // 페이지 번호들을 동적으로 생성
        
        generatePageNumbers1();
         
    }
    
});

//검색 기능 구현   
$(document).ready(function() {
    $("#searchButton").on("click", function() {
        search();
    });

    // Enter 키 누를 때 검색 함수 호출
    $("#searchField").on("keyup", function(event) {
        if (event.keyCode === 13) { // Enter 키의 keyCode는 13입니다.
            search();
        }
    });

    function search() {
        var searchText = $("#searchField").val().toLowerCase();

        // 모든 행을 숨김
        $("table#allTable tbody tr").hide();

        // 검색어와 일치하는 행을 표시
        $("table#allTable tbody tr").each(function() {
            var employeeName = $(this).find('td:eq(1)').text(); // 두 번째 열의 사원 이름을 가져옴
            if (employeeName.toLowerCase().indexOf(searchText) !== -1) {
                $(this).show();
            }
        });

        // 검색 결과가 변경되었으므로 페이지도 업데이트
        updatePage1();
    }

});

 

 

nav aria-label="Table Paging" class="my-3">
               <ul class="pagination justify-content-end mb-0" id="pagination1">
                   <!-- "이전" 버튼 -->
                   <li class="page-item" id="prevPage1">
                       <a class="page-link" href="#" aria-label="Previous">
                           <span aria-hidden="true">&laquo;</span>
                       </a>
                   </li>
                   <!-- 페이지 번호들이 여기에 동적으로 추가됩니다. -->
                   <!-- "다음" 버튼 -->
                    <li class="page-item" id="nextPage1">
                        <a class="page-link" href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>

html