[javascript] DataTables에서 여러 개의 열을 그룹화하는 방법은 무엇인가요?

30 Nov 2023

javascript

DataTables에서 여러 개의 열을 그룹화하려면 columns.group 속성을 사용할 수 있습니다. columns.group 속성은 columns 배열에 그룹화할 열을 지정하는 방식으로 사용됩니다.

다음은 예제 코드입니다.

$(document).ready(function() {
   $('#myTable').DataTable( {
      "columns": [
         { "data": "name" },
         { "data": "position" },
         { "data": "office" },
         { "data": "salary" }
      ],
      "columnDefs": [
         { "visible": false, "targets": [2, 3] }
      ],
      "responsive": true,
      "columnGroup": {
         "dataSrc": ["name", "position"],
         "name": "group_name_position"
      }
   });
});

이 예제에서는 columns 배열에 4개의 열을 정의하고, columnDefs를 사용하여 3번째와 4번째 열을 숨깁니다.

columnGroup 속성을 사용하여 name과 position 열을 그룹화합니다. dataSrc에 그룹화할 열의 이름이 포함된 배열을 지정하고, name에 그룹화된 열의 이름을 지정합니다. 그룹화된 열의 이름은 사용자 정의 스타일링에 사용됩니다.

위 코드를 사용하여 DataTables에서 여러 개의 열을 그룹화할 수 있습니다.