GridView Paging 처리

페이징 처리가 필요한 이유는 GridView에 몇 만 건 이상의 데이터가 로드될 때, 처리 속도로 인해 페이지 뜨는 속도가 오래 걸리기 때문이다.

로드되는 데이터 수를 조절하여 페이지 뜨는 속도를 향상 시킬 수 있다.

 

 

controller 에 다음과 같이 pageSize, pageNumber, totalCount, totalPage, .... 값을 생성 후 맵에 넣어준다.

//test
@RequestMapping(value="/test", method=RequestMethod.GET, produces=APPLICATION_JSON)
public @ResponseBody Map<String, Object> paging(HttpServletRequest request){
	Map<String, String> params = RequestUtils.of(request).getRequestBodyParameterMap();
	
	Map<String, Object> result = new HashMap<String, Object>();
	
	int pageSize = Integer.parseInt(params.get("pageSize"));
	int pageNumber = Integer.parseInt(params.get("pageNumber"));
	
	int totalCount = sampleService.pagingCount(params);
	int totalPage = totalCount/pageSize + 1;
	
	int startNum = pageNumber == 0 ? pageNumber + 1 : pageNumber*pageSize +1 ; 
	int endNum = pageNumber == 0 ? pageSize : pageNumber*pageSize + pageSize;
	Integer rowStart = startNum -1;
	logger.info("pageSize : " + pageSize );
	logger.info("pageNumber : " + pageNumber );
	logger.info("startNum : " +startNum );
	
	logger.info("totalCount : " + totalCount );
	logger.info("totalPage : " + totalPage );
	
	params.put("startNum", String.valueOf(startNum));
	params.put("endNum", String.valueOf(endNum));
	
	params.put("rowStart", String.valueOf(rowStart));
	
	List<ArsCall> list = sampleService.paging(params);
	
	result.put("list", list);
	result.put("totalCount", totalCount);
	result.put("totalPage", totalPage);
	result.put("pageSize", pageSize);
	result.put("pageNumber", pageNumber);
	
	return result;

	//return arsCallService.paging(params);
	}

 

js 파일

var ACTIONS = axboot.actionExtend(fnObj, {
    PAGE_SEARCH: function (caller, act, data) {
    	var pageData = caller.gridView01.getPageData();
        axboot.ajax({
            type: "GET",
        	url: "/..../test",
            data: $.extend({}, caller.searchView.getData(), pageData),
            callback: function (res) {
                caller.gridView01.setData({list:res.list, page: {
                    currentPage: pageData.pageNumber,
                    pageSize: pageData.pageSize,
                    totalElements: res.totalCount,
                    totalPages: res.totalPage
                }});
                
				console.log(res);
				console.log(pageData.pageNumber);
				console.log(pageData.pageSize);
				console.log(res.totalCount);
				console.log(res.totalPage);
            },
            options: {
                onError: function (err) {
                    console.log(err);
                }
            }
        });

        return false;
    }

gridView 부분에 해당 내용 추가

/**
 * gridView
 */
fnObj.gridView01 = axboot.viewExtend(axboot.gridView, {
    page: {
    	pageNumber:0,
    	pageSize: 100, //gridView에서 몇 개의 행을 보여줄 건지 
    	
    },

가장 중요한 mapper (mysql)

<select id="paging" parameterType="hashmap" resultType="도메인">
		
		SELECT sData sdata        
		 FROM  TABLE_NAME
		 ORDER BY sData ASC
		  <if test="rowStart != null">
			LIMIT 0, 5
		 </if>
		
	</select>

 

oracle의 경우 limit 가 아닌 rownum 을 사용해서 쓴다.

SELECT * FROM ( SELECT ROWNUM AS num
                 ,  SDATA sdata
			  	 , MDATA mdata	 
                 FROM Table_name
                 )
                 WHERE 
                 num BETWEEN 0 AND 5
			</if>