[JQuery & DataTable] DataTable 생성

 <table class="table table-bordered" id="statusTable" width="100%" cellspacing="0">

<thead>

<tr>

<th rowspan="2">변경일</th>

<th rowspan="2">회사명</th>

 <th rowspan="2">사원명(ID)</th>

   <th rowspan="2">재직여부</th>

<th colspan="3">변경정보</th>

       <th colspan="3">이전 정보</th>

</tr>

 <tr>

<td>부서</td>

   <td>직급</td>

<td>직책</td>

<td>부서</td>

  <td>직급</td>

     <td>직책</td>

  </tr>

</thead>

</table>

$('#statusTable').dataTable({

         pageLength: 10,

         bPaginate: true,

         info:false,

         pagingType:"numbers",

         bLengthChange: true,

         lengthMenu : [ [ 3, 5, 10, -1 ], [ 3, 5, 10, "All" ] ],

         bAutoWidth: false,

         processing: true,

         ordering: true,

         serverSide: false,

         searching: false,

         scrollY: false,

         ajax : {

             "url": contextPath + "/moveStatus/search",

             "type":"POST",

             data: {

            compName:  document.getElementsByClassName('selectBoxStyle')[0].value,

            startDate: document.getElementById('startDate').value,

            endDate: document.getElementById('endDate').value,

            empName: document.getElementById('empName').value

             }

         },

         columns : [

             {data: "regDate"},

             {data: "compName"},

             {data: "empName"},

             {data: "workStatus"},

             {data: "nextDeptName"},

             {data: "nextDutyName"},

             {data: "nextPositionName"},

             {data: "previousDeptName"},

             {data: "previousDutyName"},

             {data: "previousPositionName"}

         ]

     });

위와 같이 table 태그를 하나 만들어주고 컬럼 지정을위해 thead를 만들어준다

id 등을 이용하여 dataTable을 생성하고 여러 옵션을 지정한뒤  ajax를 이용하여 json 데이터를 가져와서 각 컬럼명에 맞는 데이터를 화면에 뿌려준다

주의 : 반드시 데이터들의 속성명은 data로 보내져야한다 안그러면 화면에 뿌려지지않는다