Datatables javascript library 소개

DataTables | Table plug-in for jQuery

 

업무에 사용하기 위한 라이브러리를 찾던 중 Datatables 라는 괜찮은 그리드 라이브러리를 발견하게 되었다.

가장 마음에 들었던 부분은 테이블 상단에 있는 검색창에서 텍스트를 입력하면 아래 그리드의 행의 내용이 거이 실시간으로 검색이 되어 즉시 뿌려지는데, 거이 1,000건 이상의 데이터로 실험해 본결과 성능에도 무리가 없어보였다.

특히 두 단어를 순서 없이 넣어서 검색을 해도 정확하게 내용을 찾아내는 것에 감탄을 했다.

업무에서 사용 할때는 건수가 2~300백건 내외의 데이터를 사용하기 때문에 전체 데이터를 한방에 불러 놓고 사용을 했는데 빠른 반응 속도, 페이징, 모던한 디자인, 무엇하나 흠잡을 때가 없었던것 같다.

 

 

특징

페이징, 즉시 검색, 다중 컬럼 소팅, 다양한 데이터 소스, 쉬운테마변경, 다양한 익스텐션, 모바일 친화적, 언어, 오픈소스

 

간단 예제

 

• 다음의 두 자바스크립트 라이브러리를 추가한다.

https://code.jquery.com/jquery-3.5.1.js
https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js

 

• 자바스크립트를 추가한다.

<script>
$(document).ready(function() {
    $('#example').DataTable();
} );
</script>

 

• HTML에 다음과 같은 테이블을 추가 한다.

<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Donna Snider</td>
                <td>Customer Support</td>
                <td>New York</td>
                <td>27</td>
                <td>2011/01/25</td>
                <td>$112,000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

 

자세한 내용은 홈페이지의 예제와 메뉴얼을 참조한다.

 

DataTables examples - Examples index

 

Manual