[Spring] dataTables 사용법 정리 (feat. ajax)

dataTables 사용법 정리

 

 

CDN

<script type="text/javascript" src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css"/>

 

jsp 화면

table id를 지정해준다.

<table id="userList" >
  <thead>
    <tr>
      <th>이름</th>
      <th>사번</th>
      <th>이메일</th>
      <th>SC권한</th>
      <th>직위</th>
    </tr>
  </thead>
</table>

 

 

thead 태그 있는 경우

 

 

thead 없는 경우

thead 태그를 넣어줘야 기본적인 모양이 그려진다. (없으면 디자인없이 그냥 기본테이블로 그려짐)

 

 

dataTable 그려주기

스크립트 태그안에서 적어준다.

$('#userList').DataTable();

 

 

ajax 사용하여 데이터 추가

나는 onclick 이벤트에 적어줬다.

클릭 할 때 마다 table을 파괴?하고 ajax 통신 후 새롭게 그려준다.

var table = $("#userList").DataTable();
table.destroy();

$.ajax({
  url:"selectUserList.do",
  type:"POST",
  data : { dept_id : dept_id },
  success:function(data){
 	 $("#userList").dataTable({
 	 data: data,
 	 columns: [
  		{ data: 'user_nm_ko' },
  		{ data: 'user_id' },
       	 	{ data: 'email' },
        	{ data: 'enable' },
        	{ data: 'pos_nm' }
  	]
  });

    },error:function(request, status, error){
    console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
    }
});

 

 

Controller 

꼭!!!! return값을 data라는 이름으로 보내줘야한다.

(Map에 담을대 key값을 "data"로 지정 하는등...)

@RequestMapping("selectUserList.do")
public @ResponseBody ArrayList<Member>  selectUserList(String dept_id) {
  ArrayList<Member> data = mService.selectUserList(dept_id);
  return data;
}

 

 

 

** 내가 봤던 오류 메세지 **

Cannot read property 'length' of undefined

라는 오류 메세지가 크롬 개발자 도구의 콘솔창에 계속 떳는데, 이 경우 Controller에서 값을 return할 때 data라는 이름으로 넘겨줬는지 다시 한번 확인하고,  mapping url이나 오타등이 없는지 다시 한번 확인해준다.

 

나는 data라는 이름을 썻는데도 이런 오류가 나왔다.

그래서 ModelAndView에 담아 key값을 data로 지정해주기도 하고 해봤는데, 

이번에는 404오류가 떳다.

 

localhost:8888/~~~/~~~ 404

위 오류를 해결하고는 서버에서는 문제가 없었다. 그런데 마지막에 return 할 때 자꾸 오류가 생기는 것 같은데 

@ResponseBody 태그를 원래 나는 @RequestMapping 바로 아래 달아준다.

근데 @ResponseBody 태그를 public 다음으로 옮겨주니 해결됐다. 읭?

이 글을 쓰기위해 다시 오류를 내보려고 @RequestMapping 아래로 옮겨줬는데... 오류가 없다.

그냥 스프링이 한번 반항한것같다.... (project clean, 스프링 껏다켜기 등 해봤는데도 계속 오류가 떳었다...)

 

이제 option들을 좀 알아보고 이쁘게 꾸며보고 추가 포스팅을 !