Front/JS & jQuery

[js][datatables] responsive: { details: false }

오선지♬ 2025. 2. 21. 19:49
728x90
반응형
$('#example').DataTable({
    responsive: {
        details: false
    }
});

의미:

  • responsive: DataTables에서 화면 크기에 따라 자동으로 컬럼을 숨기거나 표시하여 반응형 UI를 지원하는 옵션입니다.
  • details: false: 반응형 처리 시 숨겨진 컬럼에 대한 추가 상세 정보 표시를 비활성화합니다.

동작 방식:

  • responsive가 활성화되면 화면 크기가 작아질 때 일부 컬럼이 숨겨질 수 있습니다.
  • 기본적으로, 숨겨진 컬럼의 데이터는 클릭 시 + 버튼을 눌러 상세 보기(details 기능)에서 확인할 수 있습니다.
  • details: false를 설정하면 이 상세 보기 기능이 비활성화되어, 숨겨진 데이터가 아예 표시되지 않습니다.

 

기본 설정 (details: true 기본값) - 화면이 작아지면 숨겨진 데이터는 + 버튼을 클릭하면 표시됨.

 

details: false - 화면이 작아질 때 숨겨진 데이터가 + 버튼 없이 표시되지 않음.

728x90
반응형