본문으로 바로가기

ajax를 사용하지 않더라도 dataTables로 테이블을 그리는 것은 가능하다.

하지만 추후 대형 데이터를 고려 해 server side paging을 해야 할 필요성을 생각 했을 때, ajax통신을 활용하여 데이터를 주고 받는 것이 유리하다. 또한 그 밖에도 ajax사용해 값을 조회하면 전체 페이지가 리로드 되는 것에 대한 신경을 쓰지 않아도 된다.


서버에서 사용자 정보를 가져와 datatables로 그리드를 그릴 것이다. 서버와의 통신은 ajax로 이루어질 것이다.


step1. html 소스

1
2
3
4
5
6
7
8
9
10
11
<table id="userTable" class="table table-striped table-bordered table-hover" >
    <thead>
        <tr>
            <th>Email</th>
            <th>Name</th>
            <th>User Status</th>
            <th>Super User</th>
        </tr>
    </thead>
    <!-- tbody 태그 필요 없다. -->
</table>
cs

테이블의 id는 "userTable"로 했다. 컬럼으로 구성될 항목은 "Email", "Name", "User Status", "Super User"이다. 컬럼 헤더로 쓰일 항목과 겨저온 데이터의 컬럼 항목의 수가 맞아야 하니 신경 써서 정하는 것이 좋다.



step2. script 소스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
    <script>
    $(document).ready(function(){
            $('#userTable').dataTable({
                pageLength: 3,
                bPaginate: true,
                bLengthChange: true,
                lengthMenu : [ [ 3510-1 ], [ 3510"All" ] ],
                bAutoWidth: false,
                processing: true,
                ordering: true,
                serverSide: false,
                searching: true,
                ajax : {
                    "url":"/getUserList.do",
                    "type":"POST",
                    "data"function (d) {
                        d.userStatCd = "NR";
                    }
                },
                columns : [
                    {data: "email"},
                    {data: "fullNmKr"},
                    {data: "userStatCd"},
                    {data: "superUser"}
                ]
 
            });
 
    });
    </script>
cs

설명을 위해 자주 쓰이는 옵션들을 다 적었지만, 저 중 일부는 디폴트 값으로 굳이 지정해 주지 않아도 된다.


pageLength - 한 페이지에 기본으로 보여줄 항목 수를 뜻한다.

bPaginate - 페이징 처리를 할 것인지를 정한다. "false"로 주면 "pageLength"와는 관계 없이 전체 데이터를 출력한다.

bLengthChange - 한 페이지에 보여줄 항목 수를 변경할 것인지를 정한다. "true"로 주면 그리드에 리스트박스를 추가한다.

lengthMenu - "bLengthChange" 리스트 항목을 구성할 옵션들을 정해준다.

bAutoWidth - 자동 컬럼 폭을 계산하여 반영한다.

processing - "true"로 주면 값을 가져오는 등의 처리 상황에서 대기가 발생할 때, "processing"인디케이터를 보여준다.

ordering - 항목들에 대한 정렬을 사용할 것인가를 결정한다.

searching - 글로벌 searching 기능을 제공하는데, 타이핑한 캐릭터 별로 검색이 자동 적용되기 때문에 상당히 강력하다.

serverSide(중요)

그리드 내에서 이루어지는 모든 상황들(검색, 페이징, 정렬 등)에 대한 처리를 서버측에서 수행할 것인가를 뜻한다. "false"로 주면 처음 한번 서버에서 모든 데이터를 다 가져온 뒤, 각각의 상황에 맞게 클라이언트에서 처리한다. 데이터의 양이 적을 것이라는 확신이 있다면 "false"인 것이 더 유리하다. 하지만 데이터 양이 많다면 한번에 너무 많은 데이터를 가져와야 하기 때문에 첫 로딩에 많은 시간이 걸리고 오류가 발생할 수 있다. 그 데이터 양의 기준은 약 1만건이라고 하는데, 5천건이 넘어가는 순간부터 속도의 저하가 오는 듯 하다. "ServerSide"를 사용하기 위해서는 서버단의 처리에 다소 많은 작업이 추가되어 화면 별로 미리 결정하고 개발에 들어가는 것이 좋다. 추후 수정에 들어가는 공수가 많을 것이기 때문이다.

지금 정리할 내용은 ajax로 데이터를 가져와 그리드를 그리는것 까지이기 때문에 "serverSide" 옵션은 꺼 두었다.


이 밖에도 많은 옵션들이 있지만, 주로 쓰이는 기능들에 대해 정리해 보았다. 다른 기능들에 대한 정보는 dataTables 공식 홈페이지에서 상세하게 확인 가능하다.


ajax에는 데이터를 가져오기 위해 요청할 url과 get, post 등의 type을 정해준다. 또한, 서버로 파라미터 등의 data를 전송할 수 있다. 검색조건 등에 대한 정보를 담아 보내는 것에 사용하면 되는데, 나는 테스트를 위해 "userStatCd"라는 파라미터를 보냈다.

columns에는 가져온 데이터들 중 어떤 항목들을 컬럼으로 구성할 것인지를 결정해 줘야 한다. html소스에서 각 컬럼의 헤더로 정해준 항목의 순서대에 맞게 데이터를 구성해 준다. 수가 맞지 않는다면 에러가 발생할 것이다.




step3. Controller


이제 요청을 받을 springMVC의 컨트롤러를 작성해 보자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    @RequestMapping("/getUserList.do")
    private String getUserList(@ModelAttribute UserVO inVO) throws Exception {
        
        //서비스에서 사용자 리스트 조회
        List<UserVO> userList = userMgmtSvc.selectUserList(inVO);
 
        //클라이언트로 값 전송을 위해 WrapperVO로 감싸기
        WrapperVO rtnVO = new WrapperVO();
        rtnVO.setAaData(userList);
        
        //json string으로 parsing
        String jsonString = JsonUtil.objectToJsonString(rtnVO);
        
        return jsonString;
    }
 
cs

@ModelAttribute 어노테이션을 사용하여 데이터를 받은 것은, 클라이언트 요청에서 보내준 파라미터인 "userStatCd"를 받아오기 위함이다.

우선 서비스로 사용자 리스트를 조회해 오고, 이를 Wrapper클래스에 담았다. 리스트는 반드시 2D Array인 aaData 라는 변수명으로 보내야 클라이언트의 DataTables에서 인식해 데이터를 뿌려줄 수 있다. 이 밖에도 View단으로 보내 줄 옵션 항목들을 구성하기 위해 Wrapper클래스로 한번 감싸고, 이를 json String으로 변환해 리턴한다. 클라이언트로 보낼 별다른 데이터가 없다면 굳이 Wrapper클래스를 만들지 않더라도, 전송할 리스트 변수명을 aaData로 해서 json String으로 전송해 주면 된다.


이렇게 만들어진 소스로 서버를 구동시켜 확인해 보면 위와 같은 그리드를 만들어 낼 수 있다. 사용해본 결과, jqGrid등의 다른 제이쿼리 테이블 그리드 플러그인들에 비해 처음 사용법을 익히기는 조금 까다로웠다. 하지만 그만큼 다양한 옵션들과 자유로운 커스터마이징을 제공하기 때문에 잘 사용하면 강력한 그리드를 그릴 수 있는 플러그인이다.

다음번에는 "serverSide" 옵션을 사용해 페이징과 정렬을 서버에서 처리하는 과정을 정리해 볼 생각이다.

(server side에서 데이터 처리 예제 : http://www.leafcats.com/63 )

 Other Contents 

댓글을 달아 주세요

  1. 2017.09.18 17:34

    비밀댓글입니다

  2. 이용자 2018.08.17 09:15 신고

    WrapperVo클래스에 대한 소스는 안보여주시네요

티스토리 툴바