본문 바로가기
Javascript

datatable editor CRUD 구현

by progrpsk 2017. 7. 7.

최근 datatable 라이브러리를 통하여 CRUD가 가능한 테이블을 만들어야 하는 일이 생겼다.

이전에 get만 했을때는 editor 버전이 필요없었지만,

CRUD를 구현하기위해서는 editor 버전을 학습해야 했다.

역시나 본 라이브러리는 친절하게 예제와 수많은 설명을 제공하기에 아래의 링크를 따라서 구현하면 금방 구현한다.


참고로 예제에서는 ajax에서 type 및 url속성밖에 못 쓰는것처럼 나와 있지만

실험해보니 이외의 ajax 속성들도 사용할 수 있었다.

즉, data, dataType, success 등등의 속성도 사용가능하다.

(쓰면 쓸수록 정말 잘 만든거 같다.)


https://editor.datatables.net/examples/advanced/REST.html


문제가 하나 있다면 클라이언트에서 서버로 데이터를 전송하는것은 에러가 없었지만,

서버에서 클라이언트로 데이터를 전송할때 문제가 발생했다.

원인을 찾기 쉽지 않았는데 아래의 링크를 통해서 그 원인이 무엇인지 알게 되었다.


https://editor.datatables.net/manual/server


결론적으로 본 라이브러리에서는 서버에서 클라이언트로 데이터를 전송할때 그 형식이 string이면 에러를 발생하게 되어있다.

즉 string은 에러 메세지 전용이라는 말이고, 제대로 동작하게 하려면 배열이나 객체를 넣어줘야 한다.

그 이유는 create나 put의 경우 반환데이터를 검사하여 그 결과를 테이블에 반영하기 떄문이었다.


그렇기에 반환데이터 형식도 맞추어줘야 하는데 아래와 같이 맞추면 된다.


{

  "data": [

    {

       "DT_RowId":   "row_id",

       "column0": 5,

       "column1": "name"

    }

  ]

}


여기서 row_id의 id 값은 숫자로 넣어주면 된다.

(대부분 0을 넣는데, 그래야지 테이블이 아래에 삽입된다.)

그 아래값들은 설정한 column 값의 이름이므로 본인 테이블에 맞춰주면 된다.


'Javascript' 카테고리의 다른 글

collapsing event 만들기  (0) 2017.07.10
datatables editor customize 하기  (0) 2017.07.07
D3.js zoom in out 버튼 구현  (0) 2017.06.30
D3.js v4의 zoom, pan값 조절  (0) 2017.06.30
javascript에서 class사용하기  (0) 2017.06.28

댓글