[javascript] DataTables에서 특정 행에 대한 스타일을 지정하는 방법은 무엇인가요?

30 Nov 2023

javascript

DataTables는 데이터를 테이블 형식으로 표시하는 데 사용되는 JavaScript 라이브러리입니다. 특정 행에 대한 스타일을 지정하는 방법은 몇 가지가 있습니다.

클래스를 사용하여 스타일 지정하기: DataTables의 row 클래스를 사용하여 특정 행에 스타일을 지정할 수 있습니다. 특정 행을 선택하고 클래스를 추가한 다음 이 클래스에 원하는 스타일을 적용할 수 있습니다. 다음은 예시 코드입니다:
```
// 3번째 행에 스타일 지정하기
var table = $('#myTable').DataTable();
table.row(2).nodes().to$().addClass('highlight');
```
CSS에서 highlight 클래스를 정의하여 특정 스타일을 적용할 수 있습니다:
```
.highlight {
  background-color: yellow;
}
```

조건부 스타일링: DataTables의 rowCallback 함수를 사용하여 조건에 따라 특정 행에 스타일을 지정할 수 있습니다. 다음은 예시 코드입니다:

// 데이터 값이 특정 조건을 충족할 때 특정 행에 스타일 지정하기
var table = $('#myTable').DataTable({
  "rowCallback": function(row, data, index) {
    if (data[3] === 'Completed') { // 데이터의 4번째 열이 'Completed'일 때
      $(row).addClass('completed');
    }
  }
});

CSS에서 completed 클래스를 정의하여 특정 스타일을 적용할 수 있습니다:

.completed {
  font-weight: bold;
  color: green;
}

개별 셀에 스타일 지정하기: DataTables의 column().cells() 메서드를 사용하여 특정 행의 개별 셀에 스타일을 지정할 수 있습니다. 다음은 예시 코드입니다:
```
// 5번째 열의 첫 번째 행에 스타일 지정하기
var table = $('#myTable').DataTable();
table.cell(0, 4).nodes().to$().addClass('highlight');
```
CSS에서 highlight 클래스를 정의하여 특정 스타일을 적용할 수 있습니다:
```
.highlight {
  background-color: yellow;
}
```

위의 방법을 사용하여 DataTables에서 특정 행에 대한 스타일을 지정할 수 있습니다. 참고로, 이는 일부 가능한 방법의 예시이며 자세한 내용은 DataTables 공식 문서를 참조하시기 바랍니다.

참고 문서: