본문 바로가기

HTML & CSS & JS

DB검색으로 List 채우기

반응형

Repository Query

@Query("SELECT p FROM Prod p WHERE p.prodNm LIKE CONCAT('%',:searchProduct,'%')")
	List<Prod> findProdWithPartOfName(@Param("searchProduct") String searchProduct);

 

 

HTML 검색창

thymeleaf를 통해 Controller 접근해서 다시 화면으로 뿌려주게 함.

ajax 쓰면 data return하고 jquery환경에서 html로 보내는 법 잘 모르겠음.

java에서 thymeleaf 매개변수로 보내주는 것이 좀더 편했음.

<div class ="mb-3 mt-3">
	
	 	 	<form th:action ="@{/searchProd}" method ="post">
	 	 		<label for="searchProduct">Search Product:</label>
	 	 		<input class ="form-control" type ="text" id ="searchProduct" name ="searchProduct">
	 	 		<div class ="row">
	 	 			<div class ="col-11">
	 	 				
	 	 			</div>
	 	 			<div class ="mt-1 col-1">
	 	 				<button class= "btn btn-success" type ="submit" id ="search">Search</button>
	 	 			</div>
	 	 		</div>
	 	 	</form>
	</div>

 

Controller

Repository에서 생성한 쿼리로 찾아서 List에 저장한 뒤에 그 List를 매개변수로 다시 HTML에 뿌림

@RequestMapping(value = "/searchProd" , method = RequestMethod.POST)
	public ModelAndView searchPRod(@ModelAttribute SearchProduct searchProduct) {
		
		
		
		System.out.println("+++++++++++++++++++++++");
		System.out.println(searchProduct.getSearchProduct());
		System.out.println("+++++++++++++++++++++++");
		
		List<Prod> list = prodRepo.findProdWithPartOfName(searchProduct.getSearchProduct());
		System.out.println("+++++++++++++++++++++++");
		System.out.println(list);
		System.out.println("+++++++++++++++++++++++");
		
		
		ModelAndView mv = new ModelAndView();
		prodList = list;
		mv.setViewName("redirect:/estmRegisterTemp");
		return mv;
		
		
	
		
		
	}
@RequestMapping(value = "/estmRegisterTemp",  method = RequestMethod.GET)
	public ModelAndView estmRegisterTemp() {
		ModelAndView mv = new ModelAndView();
		
			//List<ProdCategory> prodCategoryList = new ArrayList<>();
			//prodCategoryList = prodCategoryRepo.findAllByParentCategory(0);
			
			
			mv.setViewName("estm-register");
			mv.addObject("estmReqDtlList",estmReqDtlList );
			mv.addObject("estmReqNameInput",estmReqName );
			mv.addObject("salesOptntList", salesOptntList);
			mv.addObject("prodList",prodList);
			mv.addObject("selectSalesOptntId",salesOptntId);
			mv.addObject("selectSalesOptnt",salesOptnt);
			mv.addObject("prodCategoryListFirst", prodCategoryListFirst);
			//mv.addObject("prodCategoryList", prodCategoryList);
		
		
		
		
		return mv;
	}

 

다시 HTML



-table에서 each로 받아서 쭉 나오게 출력 함.


 

<div class ="mb-3 mt-3">
	
			<table id = "product-list">
				<thead>
					<tr>
						<td>product list</td>
					</tr>
				</thead>
				
				
				<tbody>
				
					<tr th:each="prod:${prodList}">
						
					
						<td>
							<input class ="form-control"  th:value ="${prod.prodNm}"  readonly="readonly">
							<input type ="hidden" th:value = "${prod.prodId}" name =prodId  readonly="readonly">
			
						</td>
						<td>
						<form th:action ="@{/createEstmReqDtl}" method="post">
							
							<div class ="row">
								<div class ="col-6">
									<input class="form-control" name="estmReqCnt" type="number" value="0" size = 10>
									<input type ="hidden" th:value = "${prod.prodId}" name =prodId  readonly="readonly">
								</div>
								<div class ="col-6">
									<button class="btn btn-success" name="" type="submit" id ="addButton">add</button>
								</div>
							</div>
						</form>	
						</td>
						
					</tr>
				</tbody>
				
			</table>
		
	
	</div>

 

반응형