제이쿼리 기능 중 .append를 이용하여 동적 테이블 생성해보았습니다~~!!
Java단에서 테이블 생성할 리스트 map에 담아 Json형식으로 넘겨주기
@ResponseBody
@RequestMapping(value="/data/real/listup.do")
public String content(HttpServletRequest request,CskillVO CskillVO,CvdnVO CvdnVO,CagentVO CagentVO,Cvdn_minVO Cvdn_minVO,Csplit_minVO Csplit_minVO) throws Exception {
String tablename = request.getParameter("tablename");
String vdnx_numb = request.getParameter("vdnx_numb");
String split = request.getParameter("split");
Map<String, Object> map = new HashMap<String, Object>();
if(tablename.equals("cvdn")) {
//날짜에 - 뺴기
String date = CvdnVO.getCreation_date();
String creation_date = date.replace("-", "");
CvdnVO.setCreation_date(creation_date);
List<CvdnVO> cvdnlist = realService.cvdnlist(CvdnVO);
//비었는지 확인
if(cvdnlist.isEmpty()) {
int empty = 1;
map.put("empty", empty);
}
map.put("cvdnlist",cvdnlist);
String json = new ObjectMapper().writeValueAsString(map);
return json;
} 리스트의 유무도 표현하기 위해 'empty'도 map에 담아주었습니다
jQuery - ajax로 데이터 받기
<script type="text/javascript">
function search(){
$.ajax({
url : "/data/real/listup.do",
type : "POST",
data : {"tablename":$("select[name=step1]").val(),
"vdnx_numb":$("input[name=vdnx_numb]").val(),
"logid":$("input[name=logid]").val(),
"split":$("select[name=step3]").val(),
"creation_date":$("input[name=creation_date]").val()
},
success : function(data){
var data = JSON.parse(data); //json 가공
//테이블 비워주기
$("#cvdn > tbody").empty();
//테이블 유무값 empty에 담기
var empty = data.empty
//리스트담기
var cvdnlist = data.cvdnlist
var str = '<TBODY><TR>';
//cvdnlist 테이블
if(cvdnlist!=''){
$.each(cvdnlist , function(k,v){
str += '<TD>' + v.acd + '</TD><TD>' +
v.vdnx_numb + '</TD><TD>'+
v.class_gubun + '</TD><TD>'+
v.real_acdcalls + '</TD><TD>'+
v.real_waitcalls + '</TD><TD>'+
v.inqueue + '</TD><TD>'+
v.inring + '</TD><TD>'+
v.anstime + '</TD><TD>'+
v.abntime + '</TD><TD>'+
v.acdtime + '</TD><TD>'+
v.disctime + '</TD><TD>'+
v.incalls + '</TD><TD>'+
v.acdcalls + '</TD><TD>'+
v.abncalls + '</TD><TD>'+
v.outflowcalls + '</TD><TD>'+
v.disccalls + '</TD><TD>'+
v.creation_date + '</TD>';
str += '</TR></TBODY>';
});
$("#cvdn").append(str);
}else if(cvdnlist ==''&& empty==1){
str += '<TD colspan="17" >' +
"데이터가 없습니다." + '</TD>' ;
str += '</TR></TBODY>';
$("#cvdn").append(str);
}
</script>테이블 아이디값 'cvdn'을 찾아 .append(); 하기
Jsp화면단에서 표현하기
<body>
<div>
<form name="form">
<table>
<tr>
<th align="left" width="50">테이블이름 : </th>
<td width="70">
<select name = "step1" id = "table" onchange="changetable(value)">
<option>--테이블이름--</option>
<option value="cvdn">CVDN</option>
</select>
</td>
</tr>
</table>
</form>
</div>
<div id ="ctilist" width:1800px;">
<table id = "cvdn">
<thead>
<th>ACD</td>
<th>VDNX_NUMB</th>
<th>CLASS_GUBUN</th>
<th>real_acdcalls</th>
<th>real_waitcalls</th>
<th>INQUEUE</th>
<th>INRING</th>
<th>ANSTIME</th>
<th>ABNTIME</th>
<th>ACDTIME</th>
<th>DISCTIME</th>
<th>INCALLS</th>
<th>ACDCALLS</th>
<th>ABNCALLS</th>
<th>OUTFLOWCALLS</th>
<th>DISCCALLS</th>
<th>CREATION_DATE</th>
</thead>
</table>
</div>
.append를 이용하여 동적 테이블 생성하기 끝~~!!
'jQuery' 카테고리의 다른 글
| $(function(){ }); 의 의미 (0) | 2021.02.14 |
|---|---|
| jQuery - 이메일 선택 후 (Select Box) Input Box에 담기 (0) | 2021.02.08 |
| Spring Ajax - Json 데이터 한글깨짐 현상 (1) | 2021.02.02 |
댓글