[AXBoot/Front-end] 페이징 처리

YesjmGridController.java

현재 페이지 데이터를 넘기는 컨트롤러를 추가한다.

    @RequestMapping(value = "/pages", method = RequestMethod.GET, produces = APPLICATION_JSON)
    @ApiImplicitParams({
            @ApiImplicitParam(name="pageNumber", value="페이지번호(0부터)", required = true, dataType = "integer", paramType = "query", defaultValue = "0"),
            @ApiImplicitParam(name="pageSize", value="페이지크기", required = true, dataType = "integer", paramType = "query", defaultValue = "50"),
            @ApiImplicitParam(name="companyNm", value="회사명", dataType = "String", paramType = "query"),
            @ApiImplicitParam(name="ceo", value="대표자", dataType = "String", paramType = "query"),
            @ApiImplicitParam(name="bizno", value="사업자번호", dataType = "String", paramType = "query"),
            @ApiImplicitParam(name="useYn", value="사용여부", dataType = "String", paramType = "query"),
    })
    public Responses.PageResponse pages(RequestParams<EducationYesjm> requestParams) {
        Page<EducationYesjm> pages = educationYesjmService.getPage(requestParams);
        return Responses.PageResponse.of(pages);
    }

처음엔 파라메터를 넘기지 않고 페이지 값만 리턴하고서는 페이지 컨트롤러를 연결한 상태에서는 조회를 할 수 없다고 생각했다. 내 닫힌 생각,, 파라메터를 넘기고 서비스 단에서 해당 파라메터를 이용하는 메소드를 호출할 생각을 하지 못했던 것이다. 머리가 띵 대리가 명

EducationYesjmService.java

입력받은 파라메터로 해당 값을 검색하는 메소드(gets)를 호출하고 현재 페이지를 리턴하는 메소드를 생성한다.

    public Page<EducationYesjm> getPage(RequestParams<EducationYesjm> requestParams) {
        List<EducationYesjm> list = this.gets(requestParams);
        Pageable pageable = requestParams.getPageable();
        int start = (int)pageable.getOffset();
        int end = (start+pageable.getPageSize() > list.size() ? list.size() : (start+pageable.getPageSize()));
        Page<EducationYesjm> pages = new PageImpl<>(list.subList(start,end), pageable, list.size());
        return pages;
    }

education-yesjm-grid.js

PAGE_SEARCH에 pageSize 기본값을 2로 설정해주고 url을 해당 컨트롤러로 연결해준다.
기본값에 따라 한 페이지에 보여지는 데이터가 2개로 제한되었다.

    PAGE_SEARCH: function (caller, act, data) {
        var paramObj = $.extend(caller.searchView.getData(), data, { pageSize: 2 });
        axboot.ajax({
            type: 'GET',
            url: '/api/v1/_education/yesjmgrid/pages',
            data: paramObj,
            callback: function (res) {
                caller.gridView01.setData(res);
            },
            options: {
                // axboot.ajax 함수에 2번째 인자는 필수가 아닙니다. ajax의 옵션을 전달하고자 할때 사용합니다.
                onError: function (err) {
                    console.log(err);
                },
            },
        });

        return false;
    },

searchView의 getData의 return 값에 페이지 데이터를 추가한다.

/**
 * searchView
 */
fnObj.searchView = axboot.viewExtend(axboot.searchView, {
    initView: function () {
        this.target = $(document['searchView0']);
        this.target.attr('onsubmit', 'return ACTIONS.dispatch(ACTIONS.PAGE_SEARCH);');
        this.filter = $('#filter');
        this.companyNm = $('#companyNm');
        this.ceo = $('#ceo');
        this.bizno = $('#bizno');
        this.useYn = $('.js-useYn');
    },
    getData: function () {
        return {
            pageType: this.pageType,
            pageNumber: this.pageNumber || 0,
            pageSize: this.pageSize || 0,
            filter: this.filter.val(),
            companyNm: this.companyNm.val(),
            ceo: this.ceo.val(),
            bizno: this.bizno.val(),
            useYn: this.useYn.val(),
        };
    },
});