맨위로가기
 

SBGRID

닫기

jQuery Ajax를 이용한 DB페이징

DB Paging 을 사용하기 위해서는 paging 속성을 필수로 사용하셔야합니다.(기본 페이징 설정 참조) 기존 사용하고계신 ajax 통신 방법을 통해 구현하는 방식입니다. 페이지가 변경되기 전 이벤트(beforepagechanged)를 통해 그리드 데이터를 조회합니다.

이벤트 바인드

datagrid.bind( "beforepagechanged" , "fnPaging" );

예시

    function fnPaging() {
        var nLimitCount = datagrid.getPageSize();  // 몇개의 데이터를 가져올지 설정
        var nIndexStart = (datagrid.getSelectPageIndex() - 1) * nLimitCount; // 몇번째 인덱스 부터 데이터를 가져올지 설정

        //controller에 설정된 페이지 정보를 전달 합니다.
        var objData = { "firstIndexSB" : nIndexStart, "limitCountSB" : nLimitCount }; 

        $.ajax( {
            url : "",
            type : "POST",
            data : objData,
            dataType : 'json',
            async : false,   // async 는 반드시 false로 사용해 주셔야 합니다.
            success : function(result) {
                var resultData = JSON.parse(result.reponseData); // server측에서 넘어온 페이징된 조회결과목록
                datagrid.setPageTotalCount(result.totalCnt); // 데이터의 총 건수를 'setPageTotalCount' 메소드에 setting
                gridData = resultData;
				datagrid.rebuild();
            },
            error : function(req, stat, error) {
                console.log(error);
            }
        } );
    }

jQuery의 $.ajax() 시 controller

    //페이징 조회결과
    public ModelAndView selectDBPagingList2(HttpServletRequest request, HttpServletResponse response, ModelAndView mav) throws Exception {
        
        Map<String, String> paramMap = new HashMap<String, String>();

        //paging 사용 시 firstIndexSB 와 limitCountSB를 토대로 시작이 되는 인덱스와, 시작인덱스부터 가져오려는 Data의 갯수를 offset과 limit에 설정해야 합니다.
		paramMap.put("offset", request.getParameter("firstIndexSB"));		//'firstIndexSB' 파라메터명은 필수로 DB페이징 적용 시 시작이 되는 Data 인덱스
		paramMap.put("limit", request.getParameter("limitCountSB"));		//'limitCountSB' 파라메터명은 필수로 DB페이징 적용 시 시작 인덱스부터 가져오려는 Data의 갯수
		
        try {
			Gson gson = new Gson();
			
			int resultCnt = sbGridDBPagingService.selectDBTotalCnt(paramMap); // 데이터 총 건수
            List<Map<String, String>> resultList = sbGridDBPagingService.selectDBPagingList(paramMap); // 조회결과목록
            
            mav.addObject("totalCnt", resultCnt);
            mav.addObject("responseData", gson.toJson(resultList));
            
			mav.setViewName("jsonView");
		} catch (IOException e) {
			e.printStackTrace();
		}
		
		return mav;
    }

주의사항

beforepagechanged 이벤트 사용시 시점 문제가 발생하기 때문에 반드시 $.ajax() async의 속성을 반드시 'false'로 설정해 주셔야 합니다.