IT웹선생이 말하다

datatables를 사용하는 사용자라면, 상단 헤더를 움직여서 헤더를 변경 시키고 싶을 때.

dataTables.colResize.js, // 해더 resize

dataTables.colVis.js scipt // 헤더 컬럼 추가,삭제

<script type="text/javascript" language="javascript" src="media/js/jquery.js"></script>

<script type="text/javascript" language="javascript" src="media/js/jquery.dataTables.js"></script>

<script type="text/javascript" language="javascript" src="js/dataTables.colResize.js"></script>

<script type="text/javascript" language="javascript" src="js/dataTables.colVis.js"></script>

<table id="example" class="display" cellspacing="0" width="100%">

<thead>

<tr>

<th>이름</th>

<th>나이</th>

</tr>

</thead>

<tbody>

<tr>

       <td>홍길동</td>

<td>2100살</td>

</tr>

<tr>

<td>임꺽정</td>

<td>1200살</td>

</tr>

   </tbody>

</table>

위 js 를 추가하고, 해당 테이블을 datatables 선언.

$(document).ready(function() {

$('#example').DataTable( {

dom: 'C<"clear">RZlfrtip' // dom 옵션중에 R: resize C: header 컬럼 추가/삭제

} );

} )