[javascript] DataTables에서 테마를 변경하는 방법은 무엇인가요?

30 Nov 2023

DataTable 플러그인은 데이터 표시를 위한 강력한 도구이며, 기본적으로 스타일이 적용되어 있습니다. 그러나 때로는 기본 테마를 변경하고 싶을 수도 있습니다. DataTables에서 테마를 변경하는 방법을 알아보겠습니다.

먼저, DataTables 플러그인에는 기본 테마외에도 다양한 테마가 제공됩니다. 이 테마들은 CSS 파일로 포함되어 있으며, 사용자가 원하는 테마를 선택하여 사용할 수 있습니다.

단계별로 테마를 변경하는 방법을 알아보겠습니다.

DataTables 테마 파일 다운로드: DataTables 공식 웹사이트에서 원하는 테마를 다운로드합니다. 웹사이트에서 다운로드한 파일은 CSS 파일입니다.
테마 파일 연결: 다운로드한 CSS 파일을 HTML 문서에 연결합니다. head 태그 안에 <link> 태그를 추가하고, rel 속성은 stylesheet으로 설정하고, href 속성에 CSS 파일의 경로를 입력합니다.

<head>
  <link rel="stylesheet" href="테마파일.css">
</head>

테마 적용: DataTables를 초기화할 때, dom 옵션을 사용하여 원하는 테마를 지정할 수 있습니다. dom 옵션은 DataTables의 구성 요소를 정의하고 순서를 지정하는 데 사용됩니다. 아래의 코드는 dom 옵션을 사용하여 “frti” 순서로 구성요소를 지정한 예시입니다. 이때 i는 Table 정보를 나타내며, t는 Table 태그를 나타냅니다.

$(document).ready(function() {
  $('#example').DataTable({
    dom: 'frti'
  });
});

위의 코드에서 dom 옵션을 원하는 테마에 맞게 변경하면 됩니다. 테마에 해당하는 약자를 사용하여 지정하면 됩니다.

이렇게 하면 DataTables에서 원하는 테마를 적용할 수 있습니다. 참고로, DataTables 플러그인은 테마 파일 외에도 많은 사용자 정의 옵션을 제공하므로, 원하는대로 변경할 수 있습니다.

더 자세한 정보와 사용 가능한 테마에 대해서는 DataTables 공식 웹사이트를 참고하시기 바랍니다.

참고자료: