이번에 소개 하는 jQuery Plugin 은 DataTables 입니다.
보통 데이터 리스트를 보일 때 반복문으로 <tr><td></td><tr> 코드를 돌립니다.
이런 방식으로 간단한 데이터들은 기존 방식대로 해도 되지만
여러 부가적인 기능들을 직접 코딩하여 개발을 하려면 시간도 많이 걸리고 디버깅도 쉽지가 않습니다.
그래서 제가 이번에 사용해본 DataTables 는 많은 기능도 있고 사용하기 편리합니다.
우선 간단하게 사용했을 때 편리한 점은
1. 다양하게 제공되는 기능
2. 심플한 코드
이 두가지가 가장 좋았습니다.
특히 기능 중에 sorting 이라던지 rendering 등 잘 구현되어있어 좋습니다.
다양한 기능은 사이트에서 직접 예제들을 보시면 바로 이해되실겁니다.
간략하게 개발했던 코드입니다.
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();
}
}
});
| cs |
코드를 보면 제가 구현했던 로직은 AJAX 로 Json Array 데이터를 가지고 리스트를 출력했습니다.
DataTables에서 제공하는 Ajax 기능을 사용하면 쉽게 구현이 가능합니다.
데이터 부분은 이렇게 javascript로 구현하면 되고 html table 부분은 정말 심플합니다!!!
<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>
| cs |