먼저, 여러 개의 테이블을 생성하고 표시할 HTML 페이지를 작성합니다. 이 페이지에 사용할 테이블들은 고유한 ID값을 가져야 합니다. 예를 들어, 두 개의 테이블을 생성하고 ID를 “table1”과 “table2”로 지정하겠습니다.

<table id="table1">
  <!-- 첫 번째 테이블 내용 -->
</table>

<table id="table2">
  <!-- 두 번째 테이블 내용 -->
</table>

이제 DataTables를 초기화하고 각 테이블에 적용해야 합니다. 아래의 JavaScript 코드를 사용하여 DataTables를 초기화하고 테이블에 적용할 수 있습니다.

$(document).ready(function() {
  $('#table1').DataTable();
  $('#table2').DataTable();
});

위 코드는 페이지 로드가 완료된 후, ID가 “table1”인 테이블과 ID가 “table2”인 테이블에 DataTables를 적용합니다. 각 테이블은 DataTables의 다양한 기능을 활용할 수 있게 됩니다.

Table1과 Table2에 각각 다른 데이터를 표시하고 싶으시다면, DataTables의 다양한 설정 옵션과 API를 사용하여 데이터를 동적으로 로드하고 갱신할 수 있습니다. DataTables의 자세한 사용법과 기능에 대해서는 공식 문서를 참고하시기 바랍니다.

이렇게 하면 여러 개의 테이블을 한 페이지에 표시하는 간단한 예제를 구현할 수 있습니다. DataTables를 사용하면 테이블의 정렬, 검색, 페이징 및 필터링 등의 기능을 손쉽게 구현할 수 있으므로 데이터 테이블을 더 유연하고 인터랙티브하게 만들 수 있습니다.