[Javascript] DataTables

DataTables

DataTables는 Javascript 라이브러리이다.

다음과 같은 <table>이 있다고 하자.

<table id="demoTable" class="table table-bordered table-hover dataTable">
    <thead>
        <tr role="row">
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        
    </tbody>
</table>

 

demo라는 탭을 누르면 위의 테이블이 보여지고, 그 외에 다른 탭이 클릭되면 위의 테이블이 사라지게 하고 싶다고 가정하자.

// demoTable이란 id 값을 가지는 테이블 객체를 가져와 해당 객체를 .destroy() 함수를 이용해 없애버린다.
$("#demoTable").DataTable().destroy();

// id 값으로 'demoTable'을 가지는 테이블 객체를 가져와 생성한다.
// 아래에 'autoWidth', 'initComplete' 두 가지 속성 값을 사용했는데, 이 외에도 여러가지 지원 속성들이 있다.
$("#demoTable").DataTable({
    'authWidth': false,
    'initComplete': function(settings, json) {
        $("#demoTable").wrap("<div style='overflow-x:auto; width:100%; position-x:relative;'></div>");
    }
});

 

주의사항

DataTable을 사용하면서 애먹었던 부분인데, DataTable을 사용하기 위해선 테이블 폼이 규격에 맞게 정의되어있어야한다.

<thead> 태그와 <tbody> 태그가 정의되어있어야하고, 헤더와 바디의 컬럼 수가 일치해야한다.