http://macaronics.net/index.php/m01/spring/view/1652

스프링 4 이상

<dependency>
	<groupId>com.fasterxml.jackson.core</groupId>
	<artifactId>jackson-databind</artifactId>
	<version>2.8.0</version>
</dependency>

라이브리   등록

@ResponseBody 

public Map<String, Object> managementAjaxListSearch ( ){

  Map<String, Object> resultMap = new HashMap<String, Object>();

   resultMap.put("materialList", materialList);

   return resultMap;

}

끝이다.  

예 ) 프로젝트 상 다음 소스

컨트롤

	@RequestMapping(value="listAjaxSearch.do")
    @ResponseBody
    public Map<String, Object> managementAjaxListSearch(MaterialVO materialVO, PageMakerAndSearch  pageMaker , Map<String, Object> map,
            HttpServletRequest request,
            Model model) throws Exception{    
        
        map.put("mcode", materialVO.getMcode());
        map.put("materialName", materialVO.getMaterialName());
        pageMaker.setPerPageNum(2);
        
        Integer totalCount=managementService.selectMaterialSearchTotalCount(map);
        pageMaker.setTotalCount(totalCount);                
        map.put("pageStart", pageMaker.getPageStart());
        map.put("perPageNum", pageMaker.getPerPageNum());
        
        List<MaterialVO> materialList=managementService.selectMaterialSearchList(map);
        String pagination=pageMaker.bootStrapPagingHTML(request.getContextPath()+"/erp/management/listAjaxSearch.do");
        

        Map<String, Object> resultMap = new HashMap<String, Object>();
        resultMap.put("page", pageMaker.getPage());
        resultMap.put("totalCount", totalCount);
        resultMap.put("materialList", materialList);
        resultMap.put("pagination", pagination);
        return resultMap; 
    }
    
    

handlebars.js

간단하게  통한 파싱 처리 한다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.js"></script>

헨들러바 사용법 다음 주소 참조

https://sunijjang.tistory.com/27

template() 함수는 배열 데이터가 들어가야 하는데

서버단에서 넘어온 json  데이터가  배열이라서

template(result.materialList) 처리만으로 템플릿에 파라미터가 들어간다.

뷰

	<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.js"></script>



<script id="template" type="text/x-handlebars-template">
{{#each .}} 	
	<tr>
			<td class="text-center">{{no}}</td>
			<td class="text-center">{{mcode}}</td>
			<td  class="text-center">{{materialName}}</td>
			<td  class="text-center">{{properInventory}}</td>
			<td  class="text-center"><button>수정</button><button>삭제</button></td>
	   </tr>
{{/each}}	
</script>



<script>
$(function(){
	listManagementMaterialAjaxSearch();	
});
function listManagementMaterialAjaxSearch(page){

	var mcode=$("#mcode").val();
	var materialName=$("#materialName").val();	
	$.ajax({		
		url:"listAjaxSearch.do",
		type:"post",
		data:{
			'mcode':mcode,
			'materialName':materialName,
			'page':page
		},
		dataType:"json",		
		success:function(result){
			console.dir(result);
			$("#selectMaterialSearchTotalCount").text(result.totalCount);			
			
			//핸들바 템플릿 가져오기
			var source = $("#template").html();
			var template = Handlebars.compile(source);
			//배열 형식 이라 자동으로 매칭							 
			$("#management_search_tbody").html(template(result.materialList));	
			
			//console.log(result.materialList.length);
			//더보기
			$("#management_search_pagining").html(result.pagination);
		},
		error:function(result){
			console.log(result);
		}		
	});
}

</script>

위 내용이 끝이다.

DB  SQL 내용은 (SELECT @ROWNUM := 0) R  번호 처리 

	<select id="selectMaterialSearchList" resultMap="managerMaterialMAP" >
		<![CDATA[
		SELECT A.*
		
		 FROM 
		  	(
		    SELECT  mcode , material_name , proper_inventory , @ROWNUM := @ROWNUM + 1 AS no
		    
		    FROM tbl_material 

		   ,(SELECT @ROWNUM := 0) R      
		     
		      WHERE mcode IS NOT NULL 
		]]>	      
		  <include refid="listSql" />
		
		<![CDATA[    
		     ORDER BY mcode DESC
		 ) A  

		 ORDER BY no desc LIMIT #{pageStart}, #{perPageNum}
		]]>	
	</select>

데이터를 json 으로 받으려면 

@RequestBody MaterialVO materialVO

설정 후 pageMaker.setPage(materialVO.getPage() );

를 하면 된다.

@Data
public class MaterialVO {

	private Integer no;//번호
        private Integer page;
	private String mcode; //자재코드
	private String materialName; //자재명
	private Integer properInventory; //적정재고량
	private List<MaterialVO> list;
}

화면 단에서는

function listManagementMaterialAjaxSearch(page){
	page=5;
	
	var mcode=$("#mcode").val();
	var materialName=$("#materialName").val();	
	var data={};
	data["mcode"]=mcode;
	data["materialName"]=materialName;
	data["page"]=page;
	$.ajax({		
		url:"listAjaxSearch.do",
		type:"post",
		contentType:"application/json",
		data:JSON.stringify(data),
		dataType:"json",		
		success:function(result){
			
			$("#selectMaterialSearchTotalCount").text(result.totalCount);			
			
			//핸들바 템플릿 가져오기
			var source = $("#template").html();
			var template = Handlebars.compile(source);
			//배열 형식 이라 자동으로 매칭							 
			$("#management_search_tbody").html(template(result.materialList));	
			
			console.log(result.materialList.length);
			//더보기
			$("#management_search_pagining").html(result.pagination);
		},
		error:function(result){
			console.log(result);
		}		
	});
}