[JQuery]DataTable

DataTable (표, 리스트)

*참고 : https://www.datatables.net/examples/ajax/objects.html

(0) JQuery 부분

<!-- DataTables CSS -->

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/3.2.2/css/fixedColumns.bootstrap.min.css">

먼저 링크를 추가 한다.

(1) Script 부분

$(document).ready(function(){

   

    sTable = $('#searchDataTable').DataTable({

    scrollY:        false,

            scrollX:        true,

            

            scrollCollapse: true,

            paging:         true,

            

            

            columnDefs: [

                         { width: '10%', targets: 0 },

                     ],

  

            columns : [{"data":"maktg_DTM"},

                            {"data":"maktg_SHOP_NM"},

                            {"data":"maktg_STAFF_NM"},

                            {"data":"ctp_KOR_NM"},

                            {"data":"sig_KOR_NM"}]

            

        });

}

그리고 다음과 같이 선언을 해준다

(2) HTML

<table class="table table-striped table-bordered dt-responsive nowrap" id="searchDataTable" cellspacing="0" width="100%">

<thead>    

<tr>

<th >방문일시</th>

<th >업체명</th>

<th >담당자</th>

<th >시도명</th>

<th >시군구명</th>

</tr>

</thead>

</table>

위와 같이 헤더만 선언해주면 위의 JQuery 부분에서 값을 뿌려준다.