[DataTables] 테이블 출력을 위한 막강한 기능의 jQuery 플러그인, DataTables

업무를 관리하기 위한 관리자 기능을 갖춘 내부 관리 페이지를 개발해야 할 경우, 그것도 대고객 사이트가 아닌 경우 디자이너 인력의 공식적인 지원을 받을 수 없는 경우가 많다. 같은 고객을 상대하는 같은 조직이라해도 돈을 대는 클라이언트를 위해 M/M이 책정되어 있는 인력을 쉽게 제공받을 수는 없는 더러운(!) 현실에 부딪히게 된다. 이럴 경우 어쩔 수 없이 개발자가 직접 HTML 테이블 코드를 작성해야 하는데 아무래도 그 결과를 보면 아무리 겉보기보다 그 내용이 중요하다지만 왠지 허전하고 허접해보이기까지 하는 건(?) 어쩔 수 없다. 고생해서 만들었는데 고생한 티(?)가 하나도 나지 않고 왠지 대충 만든 듯한 느낌이 든다면 정말 의욕이 나지 않는다. 해서 디자이너의 도움을 받지 않고도 깔끔한 레이아웃과 뷰를 가진 테이블을 쉽게 붙일 수 있는 방법이 없을까 고민하다가 우연히 다른 블로거가 추천한 포스팅을 통해 DataTables라는 jQuery 플러그인의 존재를 알게 되었다.     

DataTables (http://www.datatables.net/)는 jQuery 플러그인으로 직접 테이블을 디자인하지 않고도 깔끔하면서도 이쁘고 다양한 기능을 가진 테이블을 손쉽게 만들어준다. 

단 몇 줄의 코딩만으로 이런 테이블을 그릴 수 있다.

디자이너를 통해 이쁘게 포장된 HTML 페이지를 제공받을 수 없었던 입장에서는 최소한의 노력으로 이쁜 룩을 가진 테이블을 핸들링할 수 있으니 나에게는 관심을 가질만 했다. 물론 원하는 양식과 기능대로 이 플러그인을 사용하기 위해서는 그만큼 그 기능과 사용법을 파악하는데 적지 않은 시간이 들지만 추후 많은 다른 페이지에서도 재활용이 가능한만큼 비용대비 기대효과는 더 낫다는 판단이 들었다.  

DataTables의 존재를 알고 그것을 이용해 내가 원하는 기능을 구현하는데 약 일주일간의 시간이 걸렸다. 비록 한 페이지 짜리지만 순수 개발만을 위해 정직 개발자에게 주어지는 시간은 사실 많지 않기에... (변명인가) 

현재 배치전용서버에서 약 300개 정도의 예약작업을 관리하고 있는데 매일 오전에 매일을 발송하여 그날에 실행된 예약작업의 실행결과를 리포팅하도록 하고 있었지만 메일을 발송한 시점 이후에 대해서는 실제로 DB 로그를 살펴보지 않는 한 알 수 없었기 때문에 상위 관리자들이 전체 예약작업의 실행결과를 보고자 하는 니즈가 있을 것으로 예상했다. 

결국 DB에 남긴 작업로그를 소스로 하여 일별로 해당 날짜의 로그정보를 보기 위한 페이지가 필요했고 여기에 다양한 필터링 기능과 즉각적으로 원하는 데이터를 보여줄 수 있는 기능을 갖춘 테이블이 필요했다. 필터링과 페이징을 위해 별도의 서버 호출을 할 필요가 없어야 하고 가져와 데이터로 클라이언트에서  사용자가 보고 싶어하는 데이터에 빠르게 접근할 수 있는 기능을 제공해야 했다. 

물론 DataTables 를 전체 다 파악한 것은 아니다. 관리역할을 맡은 나와 같은 사람에게 그럴만한 시간을 주지 않기 때문에 필요한 기능을 구현할 수 있는 정도의 시간만 투입했는데 그 시간이 대략 일주일이었던것 같다.

그래서 현재는 메일을 통해 별도의 작업로그용 페이지를 볼 수 있도록 하였고 여기서 원하는 날짜를 선택하여 해당 날짜에 실행된 전체 예약작업 결과를 볼 수 있도록 하였다. 

이 페이지 개발에는 DataTables 플러그인과 날짜 선택을 위한 DatePicker 플러그인을 사용하였다. 둘다 jQuery 플러그인이다. 관련 js 파일과 css 파일만 다운받으면 쉽게 구현할 수 있는 것들이다. 

DataTables는 테이블에 출력할 데이터로 ajax 소스를 지원하기 때문에 jQuery의 ajax 메소드 정도가 사용되었다. 그리고 이를 위해 DB에서 지정한 날짜의 작업로그를 가져와 JSON 타입으로 제공하는 별도의 웹서비스를 하나 만들었다.  물론 닷넷에서는 XML기반의 SOAP 웹서비스를 통해 쉽게 구현이 가능하지만 JSON 타입의 데이터를 주고 받는  웹서비스를 구현해보고 싶었다. 그리고 이를 위해 Json.NET이라고 하는 코드플렉스에 등록되어 있는 닷넷용 JSON 프레임웍을 사용하였다. 

닷넷에서 JSON 타입의 데이터를 다룰 수 있도록 해주는 Json.NET 프레임웍

이것이 공유의 힘인가... 필요한 것은 이미 다 어디에선가 제공되고 있어서 나같이 무늬만 개발자도 그게 어디에 있는지만 검색해보면 비교적 수월하게 일을 시작할 수 있었다.

웹서비스의 크로스도메인 문제는 ajax의 jsonp 옵션으로 해결이 가능하다.

DataTables 사이트에서는 이 테이블을 활용할 수 있는 여러가지 예제와 매뉴얼을 제공하고 있다. 대부분 예제코드를 통해 원하는 기능의 테이블을 출력할 수 있다. 다만 정말 자기 입맛에 맞는 레이아웃이나 룩을 가진 테이블을 렌더링하고 싶다면 좀 더 깊은 공부가 필요할 듯 싶다. api도 많고 옵션도 엄청 많아 예제와 다르게 구성한다면 쉽지 않는 부분이 있긴 하다.

대부분의 활용가능한 예제가 이미 코드와 함께 제공된다.

하지만 내부 관리자를 위한 관리용 사이트에서 데이터 중심의 테이블을 그려야 한다면 딱 좋은 선택이 되지 않을까 싶다.