[Tabulator] 페이징 방법(pagination local vs. remote)

Tabulator에는 pagination 기능을 지원한다.

두 가지 방식으로 사용이 가능하다. local과 remote

용어에서 보면 알 수 있듯 local은 tabulator를 사용한 페이지 내에서 pagination을 가능하게 하고

remote는 서버 자체에서 pagination을 구현할 수 있도록 지원하는 속성이다.

1. local

------ javascript ------

var table = new Tabulator("#table1", {
	layout:"fitColumns",
	placeholder:"데이터가 존재하지 않습니다.",
    pagination:"local",
    paginationSize: 10,
    columns : [		
        { 
            title: "순번", field: "", minWidth: 50, maxWidth: 60,
            formatter:function(cell, formatterParams, onRendered){
                var pos = cell.getRow().getPosition() + 1;
                return pos;
            }
        },
        {
            title: "코드", field: "requestNo", 
        },
        { 
            title: "종류", field: "custCd", 
        },
        { 
            title: "날짜", field: "requestYmd", 
        },
        { 
            title: "숫자", field: "expectedWorkDay",
        },		           
    ]
});

 table.setData("/tabulator/localList");

------ server(spring boot) ------

@RestController
@RequestMapping("/tabulator")
public class TabulatorTestController {
	@Autowired
	private TabulatorService tabSvc;
    
	@GetMapping("/localList")
	public List<Map> requestLocalList(@RequestParam(required = false) Map<String, Object> param,HttpServletRequest request) {
		LOG.START(logger);		
		List<Map> list = new ArrayList<Map>();
		try {
			list = tabSvc.selectList(param);
		} catch (Exception ex) {
			LOG.ERROR(logger, ex);
		} finally {			
			LOG.END(logger);
		}
		return list;
	}    
}

local은 아주 간단하다.

javascript에선 pagination: local, paginationSize: n(한 페이지 내에서 보여줄 행 개수)을 써준다.

server side는 간단하기에 service,mapper,sql은 생략하도록 하겠다. 단순하게 Map형식으로 데이터를 받아와 return해주는 것이 전부다.

진행했던 프로젝트 중에 대략 5,000건 이상의 데이터를 불러올 일이 있었다. 많지 않은 데이터에도 불구하고 JOIN문이 10개가 넘어 SQL 속도가 굉장히 느린 경우가 있었다. 사실 이 경우에는 쿼리를 손봐야하는 것이 맞지만... 먼저 페이지네이션을 통해 해결하고자 했다.

2. remote

------ javascript ------

var table = new Tabulator("#table1", {
	layout:"fitColumns",
	placeholder:"데이터가 존재하지 않습니다.",
    pagination:"remote",
    paginationSize: 10,
    columns : [		
        { 
            title: "순번", field: "", minWidth: 50, maxWidth: 60,
            formatter:function(cell, formatterParams, onRendered){
                var pos = cell.getRow().getPosition() + 1;
                return pos;
            }
        },
        {
            title: "코드", field: "requestNo", 
        },
        { 
            title: "종류", field: "custCd", 
        },
        { 
            title: "날짜", field: "requestYmd", 
        },
        { 
            title: "숫자", field: "expectedWorkDay",
        },		           
    ]
});

 table.setData("/tabulator/remoteList");

------ server(spring boot) ------

@RestController
@RequestMapping("/tabulator")
public class TabulatorTestController {
	@Autowired
	private TabulatorService tabSvc;
    
	@GetMapping("/remoteList")
	public Map<String, Object> requestList(@RequestParam(required = false) Map<String, Object> param,HttpServletRequest request) {
		LOG.START(logger);
		
		Map<String, Object> result = new HashMap<String, Object>();
		
		try {
			param.put("size", Integer.valueOf(param.get("size").toString()));
			param.put("offset", (Integer.valueOf(param.get("page").toString())-1) * Integer.valueOf(param.get("size").toString()));
			List<Map> list = reqSvc.selectTestList(param);
			result.put("last_page", reqSvc.getTestListSize(param) / Integer.valueOf(param.get("size").toString()) + 1);
			result.put("data", list);
		} catch (Exception ex) {
			LOG.ERROR(logger, ex);
		} finally {			
			LOG.END(logger);
		}
		return result;
	}
}​

------Mybatis(Mysql)------

    <select id="selectList" parameterType="java.util.HashMap" resultType="TabulatorVO">
        select R1.* from (
	        select *
	       	from tb_sample
		) R1
		LIMIT #{offset}, #{size}
    </select>

remote는 서버쪽에서 구현할 것이 추가된다.

javascript에서는 local이 아닌 pagination: remote이라고만 써주면 된다. 이렇게 써주게 되면 server side에서 자동으로 4가지 파라미터를 넘겨준다. page와 size는 반드시 넘어가고, sorter와 filter는 따로 정의해준 경우에만 파라미터로 넘어간다.

1. [필] page - 요청 페이지 번호(첫 로딩시 1, 페이지 클릭할 때마다 해당 페이지 번호)

2. [필] size - 한 페이지에 보여줄 페이지 사이즈(paginationSize: n에서 정의한 숫자)

3. sorter - 현재 정렬 기준(하나만)(정의했을 경우에만)

4. filter - 현재 적용시킨 필터의 배열(정의했을 경우에만)

server side 코드를 보면 mybatis에 넘길 파라미터로 size와 offset을 설정하는 부분이 있다.

선택한 페이지의 리스트만 가지고 오기 위해서 반드시 필요한 부분이다. (간단하게 설명하자면 offset은 시작 행 번호, size는 가지고올 행의 수라고 생각하면 된다.)

size는 그대로 써주면 되고, offset만 page와 size를 이용해 계산하여 넣어주면 된다.

serverside에서는 반드시 아래 형식의 JSON으로 리턴해주어야 한다.

last_page의 의미는 마지막 페이징 숫자를 의미한다. 예를 들어 총 리스트가 34개이고 paginationSize를 10으로 설정했다면 last_page는 4가 된다. 

{
    "last_page":4,
    "data":[
        {id:1, name:"bob", age:"23"}, //example row data object
    ]
}