코코넛의 Repository

DataTable 사용법 - 갱신 이슈 본문

JAVASCRIPT

DataTable 사용법 - 갱신 이슈

배우는 개발자 코.코.넛 2018.01.04 14:40

최근에 프로젝트를 하면서 Admin의 페이지를 만들어야 했고, 해당 페이지는 내가 인수 받은 컴포넌트였다.

해당 컴포넌트는 주로 테이블 형태로 집계된 데이터를 보여주는데, 이때 사용한 것이 'DataTable' 이었다.


DataTable의 경우 이미 생성된 table에 


table.DataTable();

처럼 붙여서 해당 css나 js가 자동으로 테이블을 만들어 주는 ??? 그런 라이브러리다.

(datatables.js, datatables.css 필요)


이 통일성을 깨지 않고자, 나도 Datatable을 사용하고 있었는데, 이게 처음 쓰다 보니까 너무 어려웠다.


서버를 통해 데이터를 받아 가공한 데이터를 table로 만들고 dataTable로 2차 생성을 하는 경우도 있고,


애초에 데이터를 뿌릴때 dataTable로 뿌리는 경우도 있었다.


뭐가 좋은 방법이라고는 하지 못하겠지만,.... 여튼..


이 컴포넌트 특성상 '조회' 버튼을 누르면 테이블이 그려지고, 다른 조건으로 또 '조회'를 누르면 해당 테이블이 갱신 되는 구조였다.


따라서 table은 하나인데 데이터와 테이블 형태(행과 열)가 동적으로 변경되는 상황이었다.



문제는 여기서 발생했다. 


행과 열이 동적으로 생성 되다 보니, 어떨때는 열이 10개,  다시 조회하면 15개 이런식이고, table은 하나밖에 존재 하지 않으니 dataTable에서 오류를 무지하게 뱉어 냈다.


처음에 발생한 이슈는 waring 이었는데, 해당 팝업에서 안내한 사이트로 이동해 보았다.

https://datatables.net/manual/tech-notes/3


해당 waring이 발생하는 이유는, Datatable을 생성할때 초기화 해주는 옵션들이 ( 페이징이나 스크롤바의 true, false 여부 ), 초기화 이후에 또한번 초기화를 요청 하면 발생하는 것이었다.


예로

1
2
3
4
5
6
7
8
$('#example').dataTable( {
    paging: false
} );
 
 
$('#example').dataTable( {
    searching: false
} );


이런 경우다. example 이라는 테이블에 paging 초기화 옵션을 주고 그 다음행에서 searching 추가 초기화를 진행하면 이미 Datatable은 ); 이 된 시점에서 초기화가 끝났는데 한번더 초기화를 하라고 하니 빡쳐서 waring을 뱉어낸 것이다.


해당 팝업이 발생하고 내 코드를 보았는데 나는 초기화 코드를 한데 잘 모아서 해놧더라.


$('#example').dataTable( {
    paging: false,
    searching: false
} );

 이렇게.


그런데도 문제가 있는 경우는... 뭘 까... 라고 생각을 해봤다.


내 로직은

Admin 페이지에서 파라미터 설정 -> 조회버튼 클릭 -> 테이블 생성 -> 파라미터 재설정 -> 조회 버튼 클릭 -> 테이블 갱신


이런 구조 인데. 생성 후 갱신 하는 과정에서 뭔가 충돌이 되어 문제가 발생하는 것 같았다.


그렇다면 해당 로직을 갱신이 아니라 삭제후 재생성 하면 어떨까 ?


Admin 페이지에서 파라미터 설정 -> 조회버튼 클릭 -> 테이블 생성 -> 파라미터 재설정 -> 조회 버튼 클릭 -> 기존 테이블 삭제 -> 테이블 재생성


자! 로직은 변경 됬다. 이제 실행하면 되는데 이거 코드를 어떻게 작성하지...


DataTable에서 제공하는 삭제 관련 메소드는 이러했다.


1. destory

2. remove

3. clear


제공하는 모든 것으로 해 보았으나.... 안되더라 ;;


이걸로 한 3~4시간 날리고. 다시 한번 해외 유저들의 커뮤니티를 정독했다.


보니까 내가 위의 메소드를 사용하는 방법이 틀렸었는데.


나같은 경우는


this.table = $('#table').DataTable({});

이런식으로 첫 생성을 하고 두번째 삭제 후 생성 할때 this.table 을 가지고 메소드를 걸어 줬다.


this.table.destroy()


이런식으로.. 멍청하게 쳇


console.log로 확인해 보니 this.table에는 아무것도 없었다. 아.무.것.도


변경된 코드는 이러 하다


if($('#table').html() != ""){

$('#table').html("");

$('#table').DataTable.destroy();

}


아주 간단하다.


처음 테이블을 생성 할 경우 table의 html은 공백일 테니 해당 로직을 타지 않는다. ( 정상 )

두번째 테이블 생성 요청을 할 경우 이미 table에 html이 차있을 테니 해당 조건에 해당 한다.

그러면 table의 html 을 ""으로 변경 하고. 해당 테이블에 걸려있는 DataTable을 파.괴.한.다


그럼 처음 생성 하기 전 테이블의 형태가 되고, 해당 형태에 다시 데이터를 쌓고 DataTable화 시킨다.

이것을 반복 하는 것이지..


하.. 이걸로 시간으로는 5시간 날짜로는 이틀 걸렸다....

진도 빼야지 이제...ㅠ









'JAVASCRIPT' 카테고리의 다른 글

DataTable 사용법 - 갱신 이슈  (0) 2018.01.04
0 Comments
댓글쓰기 폼