Jqgrid json으로 데이터 받기

javascript 부분

<script type="text/javascript" src="/js/jqgrid/i18n/grid.locale-kr.js"></script>
<script type="text/javascript" src="/js/jqgrid/jquery.jqGrid.src.js"></script>
<script type="text/javascript" src="/js/jqgrid/jquery.jqGrid.ext.js"></script>
<script type="text/javascript" src="/js/jqgrid/jquery.loadJSON.js"></script>
<script type="text/javascript" src="/js/jqgrid/jquery.tablednd.js"></script>
<link rel="stylesheet" type="text/css" href="/css/jqgrid/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" href="/css/jqgrid/ui.jqgrid-bootstarp.css" />

<script>
$(function() {
	$("#list").jqGrid({
    	url:"/test/ListJqgrid.es",
		mtype : 'POST',
		datatype : "json",
		colModel: [
            		{label: 'id',	    name : 'id', index : 'id',	     width : 100, align : "center" ,hidden : true},
            		{label: '코드',	  name : 'cd', index : 'cd',       width : 100, align : "center"},
            		{label: '한글명',	 name : 'kr', index : 'kr',	      width : 250, align : "left"},
            		{label: '상세보기',	name : '',	 index : '상세보기', width : 100, align : "center" , formatter: PopButton},
		],
	    postData :$("#form").serializeObject(),		//FORM값을 오브젝트화 해서 던져줍니다.기준 년도를 사용하실경우에는 알맞게 사용해주세요
	    page : "param.currentPage",
	    rowNum : "15",
	    pager : '#pager',
	    viewrecords : true,
	    height: "400px", 
	    autowidth: true,
	    gridview : true,
	    forceFit : false,
	    shrinkToFit : false,
	    cellsubmit: 'clientArray',		//REMOTE로 해야 셀편집완료후 서버에 대한 요청을 보낸다 clientArray의 경우 서버에 대한 요청이 없다
		//표의 완전한 로드 이후 실행되는 콜백 메소드이다.
		onPaging: function(pgButton) {
			var lastpage = $('#list').getGridParam('lastpage');
			//debugger;
			if(pgButton == "next_pager") $("#currentPage").val(parseInt($("#currentPage").val())+1);
			else if(pgButton == "prev_pager") $("#currentPage").val(parseInt($("#currentPage").val())-1);
			else if(pgButton == "first_pager") $("#currentPage").val(1);
			else if(pgButton == "last_pager") $("#currentPage").val(lastpage);
			else if(pgButton == "records") {
				$("#pageCnt").val($(".ui-pg-selbox option:selected").val());
			}
			else if(pgButton == "user"){
				$("#currentPage").val($(".ui-pg-input").val());  
			}
    
			search($("#currentPage").val());
		},
		onCellSelect: function(rowid,iCol,cellcontent,e){				
           	var rowVal = jQuery("#list").jqGrid('getRowData',rowid);	

          	var term_id = rowVal.term_id;
          	
          	showKcdPopup(id);  
        },
		loadComplete:function(data){
			$("#currentPage").val(data.param.currentPage);
			$("#pageCnt").val(data.param.pageCnt);
		}
	});
    
    function PopButton (cellvalue, options, rowObject) {
      return '<input type="button" onclick="showPopup('+rowObject.id+')" value="상세보기"/>';
    };
})

function search(pageNo) {
	if(pageNo == "") pageNo = "1";
	jQuery("#list").jqGrid('setGridParam', {
		datatype : 'json',
		url:"/test/ListJqgrid.es",
		page : pageNo,
		postData :$("#form").serializeObject(),
		mtype : "POST"
	}).trigger("reloadGrid");	
}

//상세보기 팝업 창
function showPopup(id) {
    $.ajax({
        url: "/test/Select.es",
        dataType: "html",
        type: "post",
        data: {
        	"id" : id
		},
        success: function(data) {
			$('#pop_content').html(data);
			$('.pieLp').fadeIn();
        },
        error: function(e) {
            alert("정보를 가져오는데 실패하였습니다.");
        }
    });
}

</script>

 

html 부분

<div class="frameW_sch">
    <form name="form" id="form" action="" method="POST" commandName="testVO" onsubmit="return false;">
    <input type='hidden' id="currentPage" name='currentPage' value="1"/>
    <input type='hidden' id="pageCnt" name='pageCnt' value="15"/>
               
    <table id="list"></table>//그리드 뿌려주는 곳
    <div id="pager"></div> //그리드 페이징 처리
<div/>

 

컨트롤단 부분

@RequestMapping("/test/ListJqgrid.es")
@ResponseBody
public Map<String , Object> Jqgrid(@ModelAttribute("testVO") TestVO testVO,
                                    HttpServletRequest request, HttpServletResponse response, ModelMap model) throws Throwable {

    request.setCharacterEncoding("UTF-8");
    List testList = new ArrayList();
    testList = testService.List(testVO);

    int pageSize = testVO.getPageCnt(); 
    int totalCount = testList.size() > 0 ? ((TestVO)testList.get(0)).getTotal_cnt() : 0;
    int pageCount = totalCount / pageSize + (totalCount % pageSize == 0 ? 0 : 1);
    int currentPage = testList.getCurrentPage()

    Map<String , Object> map = new HashMap<String , Object>() ;
    map.put("page", currentPage);
    map.put("size", "10");
    map.put("records", totalCount);
    map.put("total", pageCount);
    map.put("rows", testList);
    map.put("param", testVO);
    map.put("totalCount", totalCount);

    return map;
}

 

페이징 마이바티스 부분

<sql id="commonPagingStart">
    SELECT * FROM ( SELECT (row_number() over()) RN, TB.*, COUNT(1) OVER() AS TOTAL_CNT FROM (
</sql>

<sql id="commonPagingEnd">
    ) TB ) AL WHERE CEIL( RN / #pageCnt#::float8)::Integer = #currentPage#
</sql>