jQuery DataTables Plugin

이번에 소개 하는 jQuery Plugin 은 DataTables 라는 Grid 종류의 라이브러리입니다.

보통 개발할 때 데이터 리스트 출력 시 반복문으로 <tr><td>데이터</td><tr> 방법으로 출력을 많이 하게됩니다.

특별히 Grid 를 사용하지 않는 경우 html Tag 안에서 처리하는 경우가 많습니다.

이러한 방법으로 개발을 한다고해서 잘못된 코딩방법도 아니고 잘못 짜여진 소스도 아닙니다.

단지 리스트 출력 외에 여러 부가적인 기능들을 직접 코딩하여 개발을 하려면 시간도 많이 걸리고 디버깅도 쉽지가 않습니다.

에를 들어 Multi Sorting 이나 Paging 처리 라던지 직접 구현하려면 그만큼 시간도 듭니다.

하지만 괜찮은 Plugin 하나를 잘 알고 쉽게 다룰줄 안다면 쉽게 구현이 가능합니다.

그래서 이번에 사용해본 DataTables 같은 경우 많은 기능도 있고 특히 예제와 설명이 잘되어있어 사용하기 편리합니다.

https://www.datatables.net/

아래는 프로젝트에서 직접 개발했던 코드입니다.

코드를 간략하게 설명하자면 HTML 코드 부분은 단순하게 데이터 리스트의 컬럼과 위치만 잡는 역활을 하며

실제 데이터 출력은 javascript 부분의 ajax 함수에서 Json으로 가져와 리스트를 출력하게 됩니다.

Column 별로 rendering을 직접 구현도 가능하며 데이터 값에 따라 버튼의 유무 표현을 쉽게 할 수 있습니다.

1.Javascript 코드

dataTable = $('#dataTable').DataTable({ "order": [[ 5, "desc" ]], "columns": [ { "searchable": false, "orderable": false, "data":null, "render":function(data,type,full,meta){ if(full.pds_event == "Stop" || full.pds_event == "Collect"){ return ""; }else{ return "<button class='btn btn-block btn-info btn-sm' id='pdsSelect'> 선택</button>"; } } }, {data: "pds_key"}, { data: "pds_event", render:function(data,type,full,meta){ var returnStr = ""; switch (data){ case "Start": returnStr = "<span class=\"label label-success\">Start</span>"; break; case "Stop": returnStr = "<span class=\"label label-danger\">Stop</span>"; break; case "Pause": returnStr = "<span class=\"label label-default\">Pause</span>"; break; case "UnPause": returnStr = "<span class=\"label label-warning\">UnPause</span>"; break; case "Collect": returnStr = "<span class=\"label label-danger\">Collect</span>"; break; case "Ready": returnStr = "<span class=\"label label-info\">Ready</span>"; break; default : returnStr = data; break; } return returnStr; } }, { data: "pds_users_cnt", render:function(data,type,full,meta){ if(data == 0){ return "0 명"; }else{ return "<button class='btn btn-block btn-default btn-sm' id='pdsUsers'> "+data+" 명</button>"; } } }, { data: "pds_cid", "render":function(data,type,full,meta){ if(data == null){ return data; }else{ return phone_format(data); } } }, {data: "dt_frt"}, { data: "totalCnt", render:function(data,type,full,meta){ if(data == 0){ return " 0 "; }else{ return "<button class='btn btn-block btn-default btn-sm' id='pdsTarget'> "+data+" </button>"; } } }, { data: "processCnt", render:function(data,type,full,meta){ if(data == 0){ return " 0 "; }else{ return "<button class='btn btn-block btn-default btn-sm' id='pdsProcess'> "+data+" </button>"; } } }, { "searchable": false, "orderable": false, "data":null, render:function(data,type,full,meta){ if(full.pds_event == "Stop" || full.pds_event == "Collect"){ return ""; }else{ return "<button type='button' class='btn btn-info btn-sm' id='pdsTargetCollect'> 고객회수</button>"; } } }, ], "ajax" : { url : "/pds/getPdsList", type : "POST", data : function(d){ d.searchStartDate = dateRangeFormat($("#searchDate").val()).getStartDate(); d.searchEndDate = dateRangeFormat($("#searchDate").val()).getEndDate(); } } });

2. HTML 코드

<table id="dataTable" class="table table-bordered table-striped" width="100%"> <thead> <tr> <th>선택</th> <th>pds_key</th> <th>진행상태</th> <th>pds_users</th> <th>pds_cid</th> <th>등록일</th> <th>배분수량</th> <th>진행수량</th> <!-- <th>상담회수</th> --> <th>고객회수</th> </tr> </thead> <tfoot> <tr> <th>선택</th> <th>pds_key</th> <th>진행상태</th> <th>pds_users</th> <th>pds_cid</th> <th>등록일</th> <th>배분수량</th> <th>진행수량</th> <!-- <th>상담회수</th> --> <th>고객회수</th> </tr> </tfoot> </table>