[javascript] DataTables에서 각 행에 대한 상세 정보를 표시하는 방법은 무엇인가요?

30 Nov 2023

javascript

DataTables에서 각 행에 대한 상세 정보를 표시하는 방법은 “Child Rows”라고 하는 기능을 사용하는 것입니다. Child Rows는 각 행의 하위 행으로서 추가 정보를 보여줄 수 있는 확장 기능입니다.

먼저 DataTable을 초기화하고 Child Rows 확장 기능을 활성화해야 합니다. DataTable을 초기화할 때, “responsive” 옵션을 활성화하고 “responsive.details” 속성을 true로 설정해야 합니다. 그런 다음 “rowDetails” 클래스를 가진 행에 대해 Child Rows를 설정해야 합니다.

아래는 예시 코드입니다.

$(document).ready(function() {
    var table = $('#myTable').DataTable({
        responsive: {
            details: true
        }
    });
    
    $('#myTable tbody').on('click', 'tr', function() {
        var row = table.row($(this));
        
        if (row.child.isShown()) {
            // Child Row가 이미 표시되어 있는 경우 숨깁니다.
            row.child.hide();
            $(this).removeClass('shown');
        }
        else {
            // Child Row를 표시합니다.
            row.child(format(row.data())).show();
            $(this).addClass('shown');
        }
    });
    
    function format(d) {
        // Child Row에 표시할 추가 정보를 포맷합니다.
        return '<table>'+
            '<tr>'+
                '<td>추가 정보:</td>'+
                '<td>'+ d.additionalInfo +'</td>'+
            '</tr>'+
        '</table>';
    }
});

위의 코드는 DataTables의 “rowDetails” 클래스를 가진 행을 클릭하면 목록의 해당 행이 열리고 추가 정보가 보여집니다. 다시 클릭하면 추가 정보가 숨겨지고 행이 다시 닫힙니다.

자세한 내용 및 설정 옵션에 대해서는 DataTables 공식 문서를 참조하시기 바랍니다.

참고 문서: DataTables - Child Rows