DataTable 에서 AJAX 로 pagination 처리

Javascript DataTable 에서 AJAX 로 테이블 데이터 pagination 처리

 

DataTable(https://datatables.net/) 의 "serverSide : true" 를 통해서 AJAX 로 필요한 데이터만 가져와서 pagination 을 구현할 수 있다.

 

$('#dt_table').dataTable({

"autoWidth" : false,

"processing": true,

"ordering": false,

"serverSide": true,

"searching": false,

"lengthMenu" : [10,50,100],

"ajax" : {

"url":"/book/ajax",

"type":"POST",

"data": function (d) {

d.playerId = $('#playerId').val();

d.searchText = $('#searchText').val();

},

"dataSrc": function(json){

var list = json.data;

 

/*<![CDATA[*/

for ( var i=0 ; i < list.length ; i++ ) {

list[i].action = list[i].bookId;

list[i].guestId = list[i].playerId + ':' + list[i].name;

  }

/*]]>*/

return json.data;

}

},

"columns" : [

  {"data": "action"},

{"data": "bookId"},

{"data": "hostId"},

{"data": "type"},

{"data": "guestId"},

{"data": "regTime"}

],

"columnDefs": [

{

"render": function(data, type, row) {

/*<![CDATA[*/

return '<a data-toggle="modal" href="#editBookModal" id="editPopup" class="btn btn-xs btn-default"' + 'value="' + data + '">' + '<i class="fa fa-pencil"></i></a>'

  + '<a data-toggle="modal" href="#removeBookModal" id="removePopup" class="btn btn-xs btn-default"' + 'value="' + data + '">' + '<i class="fa fa-times"></i></a>';

 

/*]]>*/

},

"targets": 0

}

],

"drawCallback": function() {

var api = this.api();

api.$('#editPopup').click(function() {

var value = this.attributes["value"].value;

setEditPopup(value);

});

api.$('#removePopup').click(function() {

var value = this.attributes["value"].value;

setRemovePopup(value);

});

}

});

 

 문제가 되었던 부분은 첫번째 컬럼을 버튼 형식으로 표시하기 위해서 "render" 를 적용시키고 onClick 이벤트를 적용하려고 했었는데, 실제로 적용해보니 이벤트가 발생하지 않았다.

 render 부분이 원래는 다음과 같은 코드 형식이었는데, onClick 이벤트가 발생이 안되어서 doPopup() 함수가 실행이 안되는 문제가 발생했다. onClick 을 통해서 해당 row 의 id 값을 넘기려는 목적이 있다.

return '<a data-toggle="modal" href="#doModal" class="btn btn-danger btn-xs" th:onclick="|javascript:doPopup(' + data + ')|">' + '열기' + '</a>';

 

 원인을 찾아보니 링크 에서 페이지를 그리고 난후 핸들러를 잃어버린다는 댓글이 있고, 대책으로 "drawCallback" 을 사용하라고 나와있다.

 그래서 사용한 방법은 위와 같이 editPopup 엘리먼트에 value 어트리뷰트를 추가해서 렌더링하고, drawCallback 에서 click() 을 처리하도록 했다.

 아, 역시 자바스크립트는 어려워.....

 

참고한 사이트

http://stackoverflow.com/questions/8661501/datatables-i-cant-call-an-onclick-event-after-i-paginate