DataTables (그리드) 사용팁 정리

1) ajax는 1번만 호출하고, 리턴되는 데이터를 분기처리하여 두개 이상의 탭안에 그리드에 노출하고 싶을때

1. <table>에 선언된 class명으로 DataTable을 그려준다.
2. 예)

   vDataTable = $('table.gridArea').DataTable({
       sDom: 'lrtip',
       data: result.data,
       pageLength:10,
       pagingType : "full_numbers",
       serverSide:false,
       pagination:true,
       columns: [
       	{"data": "id"},
           {"data": "rNum"},
           {"data": "name"},
           {"data": "type"},
           {"data": "content"}
       ],
       columnDefs: [
           { targets: 0, visible: false }
       ],
       searchable:true,
       lengthChange:false,
       language: lang_kor,
       processing: true
   });
   
   
   $('#grid1').DataTable().column(3).search("A").draw();
   $('#grid2').DataTable().column(3).search("B").draw();

3. 여기서 중요한것은 serverSide는 false로 지정해줘야한다. 이유는 젤밑에 draw() 호출 시 ajax콜을 계속 날린다. 그래서 데이터 각 그리드별로 (grid1, grid2) A,B의 분기처리를 해도 새로운데이터로(ajax콜로 받아온데이터) 계속 덮어씀
4. sDom: 'lrtip' 옵션을 사용하여 '검색창'은 안보이게 해준다. (searchable:false로 옵션을 지정하면 아애 검색자체가 되지않는다. searchable을 true지정하면 검색자체가 (.search("A").draw();) 먹질않는다.

 

2) 탭으로 구성된 그리드의 컬럼들의 너비가 각 탭마다 동일한 너비를 갖게하려면

* 탭의 클릭 이벤트감지 내 $($.fn.dataTable.tables(true)).DataTable().columns.adjust().draw(); 선언

$(function(){

      $('ul.tabs li').on('click', function () {

        //탭 안에 있는 그리드의 컬럼 너비를 동일하게 조정
        $($.fn.dataTable.tables(true)).DataTable().columns.adjust().draw();
      });
});

 

3) 첫번째 필드에 번호를 부여하고 싶다면

columnDefs: [
    { targets: 0, render: function(data, type, full, meta){return meta.row+1;}}
],