The paging and search functions of the modal screens of the category

page, price page, and product page have been completed

src/main/webapp/WEB-INF/views/category/read.jsp

@@ -12,7 +12,7 @@
 		<div class="row">
 		<h1>제품 카테고리 상세페이지</h1>
 			<div class="col-10" style="text-align: right;">
-				<button type="button" class="btn btn-danger" id="yes_no_modal_show_button">삭제</button>
+				<button type="button" class="btn btn-danger" onclick="goDelete()">삭제</button>
 			</div>
 		</div>
 	</div>
@@ -91,8 +91,6 @@
 				form.submit();
 				
 			})//modifyBtn click
-			
-			yesNoModal.yesFunction = deleteCategoryFunction;
 		});//ready
 		
 		
@@ -123,6 +121,15 @@
 		}//deleteCategoryFunction
 		
 		
+		function goDelete(){
+	        yesNoModalTextDefine("카테고리 삭제", "해당 카테고리를 삭제하시겠습니까?");
+	        $("#yesNoModalLabel").text(yesNoModal.title);
+	        $("#yesNoModalBodyTextDiv").text(yesNoModal.body);
+	        yesNoModal.yesFunction = deleteCategoryFunction;
+	        yesNoModalBootStrap.show();
+
+
+	    }
 		
 		
         

src/main/webapp/WEB-INF/views/modal/category.jsp

@@ -1,12 +1,9 @@
 <%@ page contentType="text/html; charset=UTF-8"%>
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <script>
-    function onSearch(){
-        //
-        //
-    }
 
-    function onSelectAuth(tag){
+    function onSelect(tag){
         const $tag = $(tag);
         const tid = $tag.data('tid');
         const name = $tag.data('tname');
@@ -14,7 +11,70 @@
         $("#cls_nm_4").val(name);
         $("#kan_code").val(tid);
         hideSearchModal();
-    }
+    }//onSelect
+    
+    function pagingFunction(clickedId){
+    	var title = "분류 검색";
+		var val = "category";
+    	var searchn = $("#searchn1").val();
+		var search = $("#search1").val();
+		$("#searchModalLabel").text(title);
+		const data = { name : val,
+        		searchn : searchn,
+        		search : search,
+        		p : parseInt(clickedId)
+        		};
+		
+		$.ajax({
+            type : 'post',           // 타입 (get, post, put 등등)
+            url : '/product/show_modal',           // 요청할 서버url
+            dataType : 'html',       // 데이터 타입 (html, xml, json, text 등등)
+            data : data,
+            success : function(result) { // 결과 성공 콜백함수
+                $("#search_modal_body").html(result);
+                searchModalBootStrap.show();
+            },
+            error : function(request, status, error) {
+                alert(error)
+            }
+        });
+    	
+    	
+    }//pagingFunction
+    
+    
+    
+    
+    $(document).ready(function() {
+    	 $("#searchBtn").on("click", function(){
+    		var title = "분류 검색";
+    		var val = "category";
+    		var searchn = $("#searchn").val();
+    		var search = $("#search").val();
+    		
+    		$("#searchModalLabel").text(title);
+    		
+	        const data = { name : val,
+	        		searchn : searchn,
+	        		search : search,
+	        		p : 1
+	        		};
+	        $.ajax({
+	            type : 'post',           // 타입 (get, post, put 등등)
+	            url : '/product/show_modal',           // 요청할 서버url
+	            dataType : 'html',       // 데이터 타입 (html, xml, json, text 등등)
+	            data : data,
+	            success : function(result) { // 결과 성공 콜백함수
+	                $("#search_modal_body").html(result);
+	                searchModalBootStrap.show();
+	            },
+	            error : function(request, status, error) {
+	                alert(error)
+	            }
+	        });
+    	})//searchBtn
+    
+    });//ready
 </script>
 <div class="container">
     <div class="row">
@@ -59,11 +119,32 @@
 						<td>${dto.cls_nm_3 }</td>
 						<td>${dto.cls_nm_4 }</td>
 						<td>${dto.kan_code }</td>
-						<td><button data-tid="${dto.kan_code}" data-tname="${dto.cls_nm_4}" class="btn btn-primary" onclick="onSelectAuth(this)">선택</button></td>
+						<td><button data-tid="${dto.kan_code}" data-tname="${dto.cls_nm_4}" class="btn btn-primary" onclick="onSelect(this)">선택</button></td>
 					</tr>
 				</c:forEach>
                 </tbody>
             </table>
         </div>
     </div>
+</div>
+<div class="col-12 d-flex justify-content-center">
+	<nav>
+		<ul class="pagination">
+              <c:if test="${begin > pageNum }">
+                  <li class="page-item">
+                      <a href="javascript:void(0);" class="page-link" onclick="pagingFunction(this.id)" id="${begin - 1 }">&lt;</a>
+                  </li>
+              </c:if>
+              <c:forEach begin="${begin }" end="${end }" var="i">
+                  <li class="page-item <c:if test="${p == i}"> active </c:if>">
+                      <a href="javascript:void(0);" class="page-link " onclick="pagingFunction(this.id); return false;" id="${i }">${i }</a>
+                  </li>
+              </c:forEach>
+              <c:if test="${end < totalPages }">
+                  <li class="page-item">
+                      <a href="javascript:void(0);" class="page-link" onclick="pagingFunction(this.id)" id="${end + 1 }">&gt;</a>
+                  </li>
+              </c:if>
+         </ul>
+	</nav>
 </div>

src/main/webapp/WEB-INF/views/modal/price.jsp

@@ -0,0 +1,71 @@
+<%@ page contentType="text/html; charset=UTF-8"%>
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
+<script>
+    function onSearch(){
+        //
+        //
+    }
+
+    function onSelect(tag){
+        const $tag = $(tag);
+        const tid = $tag.data('tid');
+        const name = $tag.data('tname');
+        
+        <!-- 수정해야할 부분 -->
+        $("#productName").val(name);
+        $("#product_id").val(tid);
+        hideSearchModal();
+    }
+</script>
+<div class="container">
+    <div class="row">
+        <div class="col-12">
+            <div id="div_auth_search" class="text-end">
+	            <div class="input-group mb-3 w-50 col-centered">
+							<div class="w-30">
+	                <select class="form-select" name="searchn" id="searchn">
+						<option selected="selected" value="0">제품명</option>
+						<option value="1">가격</option>
+						<option value="2">등록날짜</option>
+					</select>
+					</div>
+					<input type="text" id="search" name="search" class="form-control" aria-label="Text input with dropdown button" placeholder="검색어를 입력하세요">
+					<button class="btn btn-info" type="button" id="searchBtn">검색</button>
+					<!-- 페이징작업용 -->
+					<input type="hidden" id="searchn1" value="${searchn}">
+					<input type="hidden" id="search1" value="${search}">
+					<!-- 페이징작업용 -->
+				</div>
+            </div>
+        </div>
+        <div class="col-12">
+            <table class="table">
+                <thead class="table-dark">
+                <tr>
+					<th>번호</th>
+					<th>제품명</th>
+					<th>가격</th>
+					<th>등록날짜</th>
+					<th>담당자</th>
+					<th>선택</th>
+				</tr>
+                </thead>
+                <tbody>
+                <c:forEach items="${list }" var="dto">
+					<tr class="detailTr" data-product_id="${dto.id}" >
+						<td>${status.count }</td>
+						<td>${dto.productDto.name }</td>
+						<td>${dto.price }</td>
+						<td><fmt:formatDate value="${dto.registration_date }"
+								dateStyle="short" /></td>
+						<td>${dto.accountDto.name }</td>
+						<!-- 수정해야할 부분 -->
+						<td><button data-tid="${dto.id}" data-tname="${dto.name}" class="btn btn-primary" onclick="onSelect(this)">선택</button></td>
+					</tr>
+				</c:forEach>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>

src/main/webapp/WEB-INF/views/modal/product.jsp

@@ -1,13 +1,10 @@
 <%@ page contentType="text/html; charset=UTF-8"%>
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
 <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <script>
-    function onSearch(){
-        //
-        //
-    }
 
-    function onSelectAuth(tag){
+    function onSelect(tag){
         const $tag = $(tag);
         const tid = $tag.data('tid');
         const name = $tag.data('tname');
@@ -15,7 +12,67 @@
         $("#productName").val(name);
         $("#product_id").val(tid);
         hideSearchModal();
-    }
+    }//onSelect
+    
+    function pagingFunction(clickedId){
+    	var title = "제품 검색";
+		var val = "product";
+    	var searchn = $("#searchn1").val();
+		var search = $("#search1").val();
+		$("#searchModalLabel").text(title);
+		const data = { name : val,
+        		searchn : searchn,
+        		search : search,
+        		p : parseInt(clickedId)
+        		};
+		$.ajax({
+            type : 'post',           // 타입 (get, post, put 등등)
+            url : '/price/show_modal',           // 요청할 서버url
+            dataType : 'html',       // 데이터 타입 (html, xml, json, text 등등)
+            data : data,
+            success : function(result) { // 결과 성공 콜백함수
+                $("#search_modal_body").html(result);
+                searchModalBootStrap.show();
+            },
+            error : function(request, status, error) {
+                alert(error)
+            }
+        });
+    	
+    	
+    }//pagingFunction
+    
+    $(document).ready(function() {
+   	 $("#searchBtn").on("click", function(){
+   		var title = "제품 검색";
+		var val = "product";
+   		var searchn = $("#searchn").val();
+   		var search = $("#search").val();
+   		
+   		$("#searchModalLabel").text(title);
+   		
+	        const data = { name : val,
+	        		searchn : searchn,
+	        		search : search,
+	        		p : 1
+	        		};
+	        $.ajax({
+	            type : 'post',           // 타입 (get, post, put 등등)
+	            url : '/price/show_modal',           // 요청할 서버url
+	            dataType : 'html',       // 데이터 타입 (html, xml, json, text 등등)
+	            data : data,
+	            success : function(result) { // 결과 성공 콜백함수
+	                $("#search_modal_body").html(result);
+	                searchModalBootStrap.show();
+	            },
+	            error : function(request, status, error) {
+	                alert(error)
+	            }
+	        });
+   	})//searchBtn
+   
+   });//ready
+    
 </script>
 <div class="container">
     <div class="row">
@@ -62,11 +119,32 @@
 						<td><fmt:formatDate value="${dto.registration_date }"
 								dateStyle="short" /></td>
 						<td>${dto.accountDto.name }</td>
-						<td><button data-tid="${dto.id}" data-tname="${dto.name}" class="btn btn-primary" onclick="onSelectAuth(this)">선택</button></td>
+						<td><button data-tid="${dto.id}" data-tname="${dto.name}" class="btn btn-primary" onclick="onSelect(this)">선택</button></td>
 					</tr>
 				</c:forEach>
                 </tbody>
             </table>
         </div>
     </div>
+</div>
+<div class="col-12 d-flex justify-content-center">
+	<nav>
+		<ul class="pagination">
+              <c:if test="${begin > pageNum }">
+                  <li class="page-item">
+                      <a href="javascript:void(0);" class="page-link" onclick="pagingFunction(this.id)" id="${begin - 1 }">&lt;</a>
+                  </li>
+              </c:if>
+              <c:forEach begin="${begin }" end="${end }" var="i">
+                  <li class="page-item <c:if test="${p == i}"> active </c:if>">
+                      <a href="javascript:void(0);" class="page-link " onclick="pagingFunction(this.id); return false;" id="${i }">${i }</a>
+                  </li>
+              </c:forEach>
+              <c:if test="${end < totalPages }">
+                  <li class="page-item">
+                      <a href="javascript:void(0);" class="page-link" onclick="pagingFunction(this.id)" id="${end + 1 }">&gt;</a>
+                  </li>
+              </c:if>
+         </ul>
+	</nav>
 </div>

src/main/webapp/WEB-INF/views/modal/vendor.jsp

@@ -0,0 +1,147 @@
+<%@ page contentType="text/html; charset=UTF-8"%>
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script>
+
+    function onSelect(tag){
+        const $tag = $(tag);
+        const tid = $tag.data('tid');
+        const name = $tag.data('tname');
+
+        $("#vendor").val(name);
+        $("#vendor_id").val(tid);
+        hideSearchModal();
+    }//onSelect
+    
+    function pagingFunction(clickedId){
+    	var title = "거래처 검색";
+		var val = "vendor";
+    	var searchn = $("#searchn1").val();
+		var search = $("#search1").val();
+		$("#searchModalLabel").text(title);
+		const data = { name : val,
+        		searchn : searchn,
+        		search : search,
+        		p : parseInt(clickedId)
+        		};
+		$.ajax({
+            type : 'post',           // 타입 (get, post, put 등등)
+            url : '/product/show_modal2',           // 요청할 서버url
+            dataType : 'html',       // 데이터 타입 (html, xml, json, text 등등)
+            data : data,
+            success : function(result) { // 결과 성공 콜백함수
+                $("#search_modal_body").html(result);
+                searchModalBootStrap.show();
+            },
+            error : function(request, status, error) {
+                alert(error)
+            }
+        });
+    	
+    	
+    }//pagingFunction
+    
+    $(document).ready(function() {
+   	 $("#searchBtn").on("click", function(){
+   		var title = "거래처 검색";
+		var val = "vendor";
+   		var searchn = $("#searchn").val();
+   		var search = $("#search").val();
+   		
+   		$("#searchModalLabel").text(title);
+   		
+	        const data = { name : val,
+	        		searchn : searchn,
+	        		search : search,
+	        		p : 1
+	        		};
+	        $.ajax({
+	            type : 'post',           // 타입 (get, post, put 등등)
+	            url : '/product/show_modal2',           // 요청할 서버url
+	            dataType : 'html',       // 데이터 타입 (html, xml, json, text 등등)
+	            data : data,
+	            success : function(result) { // 결과 성공 콜백함수
+	                $("#search_modal_body").html(result);
+	                searchModalBootStrap.show();
+	            },
+	            error : function(request, status, error) {
+	                alert(error)
+	            }
+	        });
+   	})//searchBtn
+   
+   });//ready
+    
+</script>
+<div class="container">
+    <div class="row">
+        <div class="col-12">
+            <div id="div_auth_search" class="text-end">
+	            <div class="input-group mb-3 w-50 col-centered">
+							<div class="w-30">
+	                <select class="form-select" name="searchn" id="searchn">
+						<option selected="selected" value="0">업체명</option>
+						<option value="1">업체명</option>
+						<option value="2">거래처 담당자</option>
+						<option value="3">거래처 담당자 전화번호</option>
+					</select>
+					</div>
+					<input type="text" id="search" name="search" class="form-control" aria-label="Text input with dropdown button" placeholder="검색어를 입력하세요">
+					<button class="btn btn-info" type="button" id="searchBtn">검색</button>
+					<!-- 페이징작업용 -->
+					<input type="hidden" id="searchn1" value="${searchn}">
+					<input type="hidden" id="search1" value="${search}">
+					<!-- 페이징작업용 -->
+				</div>
+            </div>
+        </div>
+        <div class="col-12">
+            <table class="table">
+                <thead class="table-dark">
+                <tr>
+					<th>번호</th>
+					<th>업체명</th>
+					<th>대표번호</th>
+					<th>거래처 담당자</th>
+					<th>거래처 담당자 전화번호</th>
+					<th>선택</th>
+				</tr>
+                </thead>
+                <tbody>
+                <c:forEach items="${vlist }" var="dto">
+					<tr class="detailTr" data-product_id="${dto.id}" >
+						<td>${start} <c:set var="start" value="${start +1 }"/></td>
+						<td>${dto.name }</td>
+						<td>${dto.president_telephone }</td>
+						<td>${dto.vendor_manager }</td>
+						<td>${dto.vendor_manager_telephone }</td>
+						<td><button data-tid="${dto.id}" data-tname="${dto.name}" class="btn btn-primary" onclick="onSelect(this)">선택</button></td>
+					</tr>
+				</c:forEach>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+<div class="col-12 d-flex justify-content-center">
+	<nav>
+		<ul class="pagination">
+              <c:if test="${begin > pageNum }">
+                  <li class="page-item">
+                      <a href="javascript:void(0);" class="page-link" onclick="pagingFunction(this.id)" id="${begin - 1 }">&lt;</a>
+                  </li>
+              </c:if>
+              <c:forEach begin="${begin }" end="${end }" var="i">
+                  <li class="page-item <c:if test="${p == i}"> active </c:if>">
+                      <a href="javascript:void(0);" class="page-link " onclick="pagingFunction(this.id); return false;" id="${i }">${i }</a>
+                  </li>
+              </c:forEach>
+              <c:if test="${end < totalPages }">
+                  <li class="page-item">
+                      <a href="javascript:void(0);" class="page-link" onclick="pagingFunction(this.id)" id="${end + 1 }">&gt;</a>
+                  </li>
+              </c:if>
+         </ul>
+	</nav>
+</div>

src/main/webapp/WEB-INF/views/price/read.jsp

@@ -11,7 +11,7 @@
 		<div class="row">
 		<h1>제품 상세페이지</h1>
 			<div class="col-10" style="text-align: right;">
-				<button type="button" class="btn btn-danger" id="yes_no_modal_show_button">삭제</button>
+				<button type="button" class="btn btn-danger" onclick="goDelete()">삭제</button>
 			</div>
 		</div>
 	</div>
@@ -118,6 +118,16 @@
         });
 	}//deletePriceFunction
 	
+	function goDelete(){
+        yesNoModalTextDefine("제품가격 삭제", "해당 제품가격을 삭제하시겠습니까?");
+        $("#yesNoModalLabel").text(yesNoModal.title);
+        $("#yesNoModalBodyTextDiv").text(yesNoModal.body);
+        yesNoModal.yesFunction = deletePriceFunction;
+        yesNoModalBootStrap.show();
+
+
+    }
+	
 	</script>
 </body>
 </html>

src/main/webapp/WEB-INF/views/product/create.jsp

@@ -57,17 +57,15 @@
 	                		<span class="input-group-text" id="basic-addon4">거래처</span>
   							<input type="text" name="vendor" id="vendor" class="form-control" 
   							placeholder="거래처를 입력하세요" aria-label="거래처"
-  							aria-describedby="button-addon2">
+  							aria-describedby="button-addon2" readonly>
   							<button class="btn btn-outline-secondary rounded-end" id="searchVendor" 
   							style="background-color:#FF5E5E;" type="button" onclick="showSearchModal2('거래처 검색','vendor')">검색</button>
-  							<input type='hidden' id='searchVendorChack' value='0'>
+  							<input type='hidden' id="vendor_id" value="">
 						</div>
 						
 	                	<!-- 추후 수정 -->
 	                	<input type='hidden' id="manager_id" value="83bdda69-ae95-11ee-935d-0242ac110006">
-	                	<input type='hidden' id="vendor_id" value="52f16bb8-aeb9-11ee-935d-0242ac110006">
-	                	
-	                	
+	           	
 	                	<!-- 추후 수정 -->
 	                	
                 	</div>
@@ -190,7 +188,7 @@
 		        const data = { name : val};
 		        $.ajax({
 		            type : 'post',           // 타입 (get, post, put 등등)
-		            url : '/category/show_modal',           // 요청할 서버url
+		            url : '/product/show_modal2',           // 요청할 서버url
 		            dataType : 'html',       // 데이터 타입 (html, xml, json, text 등등)
 		            data : data,
 		            success : function(result) { // 결과 성공 콜백함수

src/main/webapp/WEB-INF/views/product/read.jsp

@@ -11,7 +11,7 @@
 		<div class="row">
 		<h1>제품 상세페이지</h1>
 			<div class="col-10" style="text-align: right;">
-				<button type="button" class="btn btn-danger" id="yes_no_modal_show_button">삭제</button>
+				<button type="button" class="btn btn-danger" onclick="goDelete()">삭제</button>
 			</div>
 		</div>
 	</div>
@@ -128,7 +128,15 @@
             });
 			
 		}//deleteProductFunction
-		
+		function goDelete(){
+	        yesNoModalTextDefine("제품 삭제", "해당 제품을 삭제하시겠습니까?");
+	        $("#yesNoModalLabel").text(yesNoModal.title);
+	        $("#yesNoModalBodyTextDiv").text(yesNoModal.body);
+	        yesNoModal.yesFunction = deleteProductFunction;
+	        yesNoModalBootStrap.show();
+
+
+	    }
 	</script>
 </body>
 </html>

src/main/webapp/WEB-INF/views/product/update.jsp

@@ -42,15 +42,15 @@
   							
 						</div>
 						
-                        <div class="input-group mb-3 w-40 col-centered">
-                            <span class="input-group-text" id="basic-addon4">거래처</span>
-                            <input type="text" class="form-control" name="newVendor" placeholder="거래처를 입력해도 바뀌는 건 없습니다." 
-                            aria-label="거래처" id="vendor"  value="${dto.vendorDto.name }">
-                            
-                            <button class="btn btn-outline-secondary rounded-end" id="searchVendor" 
-  							style="background-color:#FF5E5E;" type="button" >검색</button>
-  							<input type='hidden' id='searchVendorChack' value='0'>
-                        </div>
+						<div class="input-group mb-3 w-40 col-centered">
+	                		<span class="input-group-text" id="basic-addon4">거래처</span>
+  							<input type="text" name="vendor" id="vendor" class="form-control" 
+  							placeholder="거래처를 입력하세요" aria-label="거래처"
+  							aria-describedby="button-addon2" value="${dto.vendorDto.name }" readonly>
+  							<button class="btn btn-outline-secondary rounded-end" id="searchVendor" 
+  							style="background-color:#FF5E5E;" type="button" onclick="showSearchModal2('거래처 검색','vendor')">검색</button>
+  							<input type='hidden' id="vendor_id" value="${dto.vendor_id }">
+						</div>
 
                         <div class="input-group mb-3 w-40 col-centered">
                             <span class="input-group-text" id="basic-addon5">등록날짜</span>
@@ -61,9 +61,7 @@
 						<input type='hidden' id="id" value="${dto.id }">
                         <!-- 추후 수정 -->
 	                	<input type='hidden' id="manager_id" value="83bdda69-ae95-11ee-935d-0242ac110006">
-	                	<input type='hidden' id="vendor_id" value="${dto.vendor_id }">
-	                	
-	                	
+	               
 	                	<!-- 추후 수정 -->
                         
                     </div>
@@ -188,7 +186,24 @@
 	                alert(error)
 	            }
 	        });
-	    }
+	    }//showSearchModal
+		function showSearchModal2(title, val){
+	        $("#searchModalLabel").text(title);
+	        const data = { name : val};
+	        $.ajax({
+	            type : 'post',           // 타입 (get, post, put 등등)
+	            url : '/product/show_modal2',           // 요청할 서버url
+	            dataType : 'html',       // 데이터 타입 (html, xml, json, text 등등)
+	            data : data,
+	            success : function(result) { // 결과 성공 콜백함수
+	                $("#search_modal_body").html(result);
+	                searchModalBootStrap.show();
+	            },
+	            error : function(request, status, error) {
+	                alert(error)
+	            }
+	        });
+	    }//showSearchModal2
 	
 	
 	</script>