테이블 외부의 두 그룹에 대한 열 가시성 토글 버튼

Question

내 DataTable에서 Visibility toggle buttons을 사용하고 있으며 모든 것이 잘 작동하지만 열과 버튼을 "분류"하고 싶습니다. 아래를 참조하십시오.

우리는 총 5 개의 열이 있고, 왼쪽에 우리는 종류의 야채와 과일과 사이드 바 있습니다. 여기에서 문제는 DataTables 나는 과일과 야채에있는 버튼을 분리 할 수 ​​없음을 의미 몇 가지 기본 옵션

buttons: [ 
    'columnsToggle' 
], 

을 사용하고, 내가 버튼을 분류하는 것 같지 수 있다는 것입니다.

Answer 1

과일의 경우 group1, 야채의 경우 group2과 같이 헤더의 th 요소에 다른 클래스를 할당하여이 작업을 수행 할 수 있습니다.

그런 다음 아래 코드를 사용하여 두 세트의 열 가시성 단추를 만들고이를 적절한 단추 컨테이너에 삽입하십시오. 예를 들어

:

$(document).ready(function(){ 
    var table = $('#example').DataTable(); 

    var buttons1 = new $.fn.dataTable.Buttons(table, { 
     buttons: [ 
      { 
       extend: 'columnsToggle', 
       columns: '.group1' 
      }, 
     ] 
    }).container().appendTo($('#buttons-group1')); 

    var buttons2 = new $.fn.dataTable.Buttons(table, { 
     buttons: [ 
      { 
       extend: 'columnsToggle', 
       columns: '.group2' 
      }, 
     ] 
    }).container().appendTo($('#buttons-group2')); 
}); 

코드 및 데모에 대한 this example 참조하십시오.