DataTable은 효율적인 데이터 테이블을 생성하고 관리하기 위한 자바스크립트 라이브러리입니다. DataTables를 사용하여 데이터를 표시하기 전에 데이터 소스를 설정해야 합니다.

일반적으로 DataTables는 서버나 클라이언트에서 데이터를 가져오는 두 가지 방식을 지원합니다. 데이터 소스를 설정하는 방법은 데이터를 가져오는 방식에 따라 다릅니다.

클라이언트 측 데이터 소스

DataTable을 클라이언트에서 사용하여 데이터를 직접 제공하는 경우에는 다음과 같이 데이터 소스를 설정할 수 있습니다.

$(document).ready(function() {
    $('#myTable').DataTable( {
        data: [
            ['John Doe', 'johndoe@example.com'],
            ['Jane Smith', 'janesmith@example.com'],
            ['Bob Johnson', 'bjohnson@example.com']
        ]
    } );
} );

위의 예제에서는 data 속성에 배열 형태의 데이터를 지정하여 DataTable에 표시할 데이터를 설정하고 있습니다. 이 배열은 각 행마다 데이터가 포함된 배열을 포함하고 있습니다.

서버 측 데이터 소스

만약 DataTable이 서버에서 데이터를 가져와야 한다면, 서버 측 데이터 소스를 설정해야 합니다. 아래 예제는 서버 측 데이터 소스를 설정하는 방법을 보여줍니다.

$(document).ready(function() {
    $('#myTable').DataTable( {
        ajax: '/api/data',
        columns: [
            { data: 'name' },
            { data: 'email' }
        ]
    } );
} );

위의 예제에서는 ajax 속성에 데이터를 반환하는 서버 API의 URL을 지정하고, columns 속성에는 각 열에 해당하는 데이터 속성을 지정합니다.

분명하게 데이터 소스를 설정하면 DataTables는 지정된 데이터를 가져와 데이터 테이블로 표시합니다.