페이징 처리

 <table class="table table-bordered"  width="100%" cellspacing="0">
    <thead>
        <tr>
            <th>#번호</th>
            <th>제목</th>
            <th>작성자</th>
            <th>작성일</th>
            <th>수정일</th>
        </tr>
    </thead>
    <tbody>
        <c:forEach items="${list}" var="board">
        <tr>
            <!-- 기존에 a 태그로 조회링크를 처리 했으나, form 방식으로 변경함. -->
            <td><a href="${board.bno}" value="${board.bno}">${board.bno}</a></td>
            <td>${board.title}</td>
            <td>${board.writer}</td>
            <td><fmt:formatDate value="${board.regdate}" pattern="yyyy/mm/dd" /></td>
            <td><fmt:formatDate value="${board.updateDate}" pattern="yyyy/mm/dd" /></td>
        </tr>
        </c:forEach>
    </tbody>
</table>

<!-- Start pagination -->
<!-- justify-content-end : 부트스트랩4의 정렬방식으로, 우측 정렬 -->
<ul class="pagination justify-content-end" style="margin:20px 0">
    <c:if test="${pageMaker.pre}">
            <li class="page-item"><a class="page-link" href="${pageMaker.startPage - 1}">Previous</a></li>
    </c:if>
    
    <c:forEach var="num" begin="${pageMaker.startPage}" end="${pageMaker.endPage}">
        <li class="page-item ${pageMaker.cri.pageNumber==num ?'active':'' }"><a class="page-link" href="${num}">${num}</a></li>
        
    </c:forEach>
    
    <c:if test="${pageMaker.next}">
            <li class="page-item"><a class="page-link" href="${pageMaker.endPage + 1}">Next</a></li>
    </c:if>
</ul>
<form action='/board/list' method='get'>
    <input type='hidden' name="pageNumber" id="pageNumber" value="${pageMaker.cri.pageNumber}"/>
    <input type='hidden' name="amount" id="amount" value="${pageMaker.cri.amount}"/>
    <!-- mySql DB를 사용하는 경우, limit 에 넣어줄 데이터 순서 -->
    <input type='hidden' name="rowindex" id="rowindex" value="${pageMaker.cri.rowindex}"/>
</form>
<!-- 생략 -->
<script type="text/javascript">
 $(document).ready(function(){
	$(".page-link").on("click", function(e){
		e.preventDefault();
		
		$('#pageNumber').val($(this).attr('href'));
		const amount = $('#amount').val();
		const pageNumber = $('#pageNumber').val();
		$('#rowindex').val((pageNumber-1) * amount);
		$('form').submit();
		
	});
	
	$('.table a').on('click', function(e){
		e.preventDefault();
		const form = $('form');
		const bno = $('<input>').attr('name','bno').val($(this).attr('href'));
		form.append(bno);
		form.attr('action','/board/get').attr('method','get');
		form.submit();
	})
});
 </script>

<!-- 생략 -->
<form action='/board/modify' method='get'>
    <input type='hidden' name='bno' value='${board.bno}'/>
    <input type='hidden' name="pageNumber" value="${criteria.pageNumber}"/>
    <input type='hidden' name="amount" value="${criteria.amount}"/>
    <input type='hidden' name="rowindex" value="${criteria.rowindex}"/>
</form>
<!-- 생략 -->
 <script type='text/javascript'>
 	$(document).ready(function(){
 		
 		$('button').on('click', function(){
             <!-- $.data()는, element의 'data-xxx' 속성의 값을 가져옴 -->
 			const oper = $(this).data('oper');
 	 		const form = $('form');
 	 		if(oper == 'list'){
 	 			form.attr('action', '/board/list');
 	 			form.find('input[name="bno"]').remove();
 	 		}
 	 		form.submit();
 		})
 	})
 </script>

<!-- 생략 -->
    <input type='hidden' name="pageNumber" value="${criteria.pageNumber}"/>
    <input type='hidden' name="amount" value="${criteria.amount}"/>
    <input type='hidden' name="rowindex" value="${criteria.rowindex}"/>
<!-- 생략 -->
 <script type="text/javascript">
 $(document).ready(function(){
	 $('button').on('click',function(e){
		 e.preventDefault();
		 <!-- form의 기본 처리는 수정처리 됨. -->
		 const form = $('form');
		 const oper = $(this).data('oper');
		 const pageNumberInput = form.find('input[name="pageNumber"]');
		 const amountInput = form.find('input[name="amount"]');
		 const rowindexInput = form.find('input[name="rowindex"]');
		 const bnoInput = form.find('input[name="bno"]');
		 
		 switch(oper){
             <!-- 목록으로 이동하는 버튼 클릭 시! -->
		 case 'list':
			 form.attr('action', '/board/list').attr('method','get');
			 form.empty();
			 form.append(pageNumberInput, amountInput, rowindexInput);
			 break;
             <!-- 삭제 처리 버튼 클릭 시! -->
		 case 'remove':
			 form.attr('action', '/board/remove').attr('method','post');
			 form.empty();
			 form.append(pageNumberInput, amountInput, rowindexInput, bnoInput);
			 break;
		 }
		 form.submit();
	 })
 });
 </script>