[jQuery] Datatable 로 쉽게 데이터 조회하는 테이블 만들기

1. CDN을 통해 외부 라이브러리를 쉽게 import 하기

 <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <!-- css files for DataTables -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap.min.css"/>
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css"/>

    <!-- javascript files for DataTables & Plugins -->
    <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.2.9/js/responsive.bootstrap4.min.js"></script>

2. 테이블을 만들면 된다

<table id="userTable" class="table table-striped table-bordered table-hover" >
    <thead>
        <tr>
            <th>Email</th>
            <th>Name</th>
        </tr>
    </thead>
    <!-- tbody 태그? 데이터 테이블이 다 만들어준다 -->
</table>

3. 이제 늘 하던대로 VO나 Entity 하나 두고 html단에서 ajax 통신으로 컨트롤러->서비스->리포지토리로 가서 데이터를 긁어오면 된다. 아래는 샘플 서버사이드 스크립트

<script th:inline="javascript">
    var table = null;
    window.onload = function () {
        table = $('#테이블 ID').DataTable({
            processing: true,
            serverSide: true,
            ordering: false,
            ajax: {
                url: contextPath + "/매핑할 url",
                type: "POST",
                dataType: "json",
                contentType: "application/json",            
                data: function (d) {
                    return JSON.stringify(d);
                }
            },
            columns: [
                {data: "email"},
                {data: "name"}
            ]
        });
    }
</script>

테이블

끗