jqGrid dataType json CRUD + filterToolbar + dateRangePicker 2부 페이징 설정

 

추천 그리드 ▼

Link : https://aljjabaegi.tistory.com/593

[VanilaJS Free Grid library] Aljjabaegi Grid Grand Open

 

jqGrid dataType json CRUD + filterToolbar + dateRangePicker 2부 페이징 설정

 

1부 에서는 데이터를 가져와 표출하는 부분까지 했었죠.

이번 2부에서는 페이징 설정을 하는 방법에 대해 알아보도록 하겠습니다.

 

1부의 내용에 추가되는 방식으로 진행할 예정이니 1부 내용을 참고 하세요.

 

Link : jqGrid dataType json CRUD + filterToolbar + dateRangePicker 1부 데이터 조회

 

페이지 설정을 하기 위해서는 pager 옵션과 페이지 설정에 필요한 파라메터들이 필요합니다.

1부에서 살펴본 setGrid 함수에 pager와 postData를 추가해주세요.

 

[jqGridTest.jsp]

function setGrid(){
    var html = '<table id="csrList"></table><div id="csrPage"></div>';
    $('#listTable').html(html);
    var gridOption = {
        id : 'csrList',
        url : '${ctx}/getCsrList.do',
        mType : 'POST',
        dataType : 'json',
        pager : 'csrPage',
        postData : {
            pageIndex : 1,
            pageUnit : 10,
            pageSize : 10,
        },
        colN : ['테넌트명','ID','이름','내선번호','연락처','등록일자','최근 로그인', 'PW 초기화'],
        colM : [
            {name:'csrTenant',align:'center',width:'50px'},
            {name:'csrId', align:'center',width:'50px'},
            {name:'csrName', align:'center',width:'50px'},
            {name:'csrDn', align:'center',width:'40px'},
            {name:'csrPhone', align:'center',width:'50px'},
            {name:'regDtm', align:'center',sorttype: 'date'},
            {name:'recentLoginTime', align:'center'},
            {name:'pwReset', align:'center', width:'25px'},
        ],
        rowNum : 10,
        rowList : [10,20,30,40,50,100]
    };
    jqGridFunc.setGrid(gridOption);
}

 

 

jqGrid를 표출하는 <table> 아래 페이징기능을 설정할 <div>를 추가합니다.

그리고 위와 같이 pager 와 postData의 3개의 파라메터를 추가합니다.

리스트에 표출될 데이터의 갯수를 수정하고 싶다면 rowList도 추가합니다.

 

jqGridFunc.setGrid 에도 pager 부분을 추가해야겠죠?

 

[jqGridFunc - setGrid Function]

setGrid : function(gridOption, filterOption){
    var grid = $('#'+gridOption.id);
    var pager = $('#'+gridOption.pager);
        
    grid.jqGrid({
        url : gridOption.url,
        mtype : gridOption.mType,
        datatype : gridOption.dataType,
        postData : gridOption.postData,
        colNames : gridOption.colN,
        colModel : gridOption.colM,
        rowNum : gridOption.rowNum,
        rowList : gridOption.rowList,
        pager : pager,
        jsonReader : {
            repeatitems : false,
            root : 'row',
            total : 'totalPage',
            records : 'totalCnt',
        },
        viewrecord : false,
        loadonce : false,
        loadui : "enable",
        loadtext:'데이터를 가져오는 중...',
        height : "680px",
        autowidth:true,
        shrinkToFit : true,
        refresh : true,
        loadError:function(xhr, status, error) {
            alert(error); 
        },
    });
},

 

pager Option 이 추가 되었고 jsonReader에도 total과 records가 추가되었습니다.

total은 전체 페이지 개수, records는 전체 데이터 개수를 받아오면 됩니다.

 

그리고 서버로 request를 하기 전에 postData값을 수정해 주어야 합니다.

일반적인 생각으로 setGridParam을 통해서 설정해주면 되겠구나 했지만, 이렇게 할 경우 이전의 데이터값이 넘어가는 문제가 있었습니다.

그래서 getGridParam으로 현재의 postData값을 가져와 바꿔주는 방식을 사용해야 합니다.

 

 

 

 

아래의 beforeRequest 함수를 옵션에 추가해 주세요.

 

beforeRequest: function () {
    var currentPage = $("#csrList").getGridParam("page");
    var currentUnit = $('.ui-pg-selbox option:selected').val();
    var newPostData = $('#csrList').jqGrid("getGridParam", "postData");
    
    newPostData.pageIndex = currentPage;
    newPostData.pageUnit = currentUnit;
},

 

이제 현재의 페이지값과 표출개수 값이 서버로 올바르게 전달이 됩니다.

그럼 Controller에서는 이 값을 받아 전체페이지 값과 레코드 값을 구해 리턴해주어야 하는데요. 

 

저는 전자정부에서 제공하는 PaginationInfo class를 활용했습니다.

 

[Contoller]

    @RequestMapping(value="/getCsrList.do", method = RequestMethod.POST, produces="text/plain;Charset=UTF-8")
    @ResponseBody
    public String getCsrList(SearchVO param){
        Gson gson = new Gson();
        CsrSet set = new CsrSet();
        List<CsrVO> data = null;
        try {
            PaginationInfo paginationInfo = new PaginationInfo();
            int cnt = mainService.getCsrListCnt(param);
            paginationInfo.setTotalRecordCount(cnt);
            paginationInfo.setCurrentPageNo(param.getPageIndex());
            paginationInfo.setRecordCountPerPage(param.getPageUnit());
 
            param.setFirstIndex(paginationInfo.getFirstRecordIndex());
            param.setLastIndex(paginationInfo.getLastRecordIndex());
            param.setRecordCountPerPage(paginationInfo.getRecordCountPerPage());
 
            if (cnt>0){
                data = mainService.getCsrList(param);
                set.setTotalCnt(cnt);
                set.setRow(data);
                set.setTotalPage(paginationInfo.getTotalPageCount());
                set.setResultCode(Define.SUCCESS_CODE);
            }else{
                set.setResultCode(Define.NO_DATA_CODE);
            }
        } catch (Exception e) {
            set.setResultCode(Define.FAIL_CODE);
            e.printStackTrace();
        }
        return gson.toJson(set);
    }

 

PaginationInfo를 활용해 전체데이터 개수(cnt)와 현재페이지(param.getPageIndex), 행표출 개수(param.getPageUnit)

을 설정하면 쿼리에서 ROW_NUMBER()를 활용해 SELECT할 수 있는

firstIndex와 lastIndex를 구할 수 있습니다.

그리고 리턴해 주어야 할 전체 페이지수도 구할 수 있죠.(paginationInfo.getTotalPageCount())

 

이렇게 서버와 주고받을 파라메터 설정을 마치면

아래와 같이 페이징 설정이 가능합니다.

 

 

이어서 3부에서는 페이지 헤더를 클릭 해 정렬하는 방법에 대해 알아보도록 하겠습니다.

 

Link : jqGrid dataType json CRUD + filterToolbar + dateRangePicker 3부 헤더 정렬