2019-12-26

참고링크: Custom toolbar elements

datatables의 dom툴바를 꾸미고 싶을때는 dom속성에 <"class_name"> 식으로 추가한뒤에 커스텀 하면 된다.

<table id="example" class="display" style="width:100%">
	<thead>
		<tr>
			<th>이름</th>
			<th>직위</th>
			<th>사무실</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>홍길동</td>
			<td>부장</td>
			<td>서울</td>
		</tr>
		<tr>
			<td>김도몽</td>
			<td>과장</td>
			<td>인천</td>
		</tr>
		<tr>
			<td>김길자</td>
			<td>대리</td>
			<td>대전</td>
		</tr>
	</tbody>
</table>

<link rel="stylesheet" href="/post_inc/datatables/jquery.dataTables.min.css">
<script src="/post_inc/datatables/jquery.dataTables.min.js"></script>

<style media="screen">
div.dt_title{
	color:green;
	float:left;
	font-size:20px;
}
div.dt_btn{
	padding:5px;
}
</style>
<script type="text/javascript">

var example_tbl = null
$(function() {
	example_tbl = $('#example').DataTable( {
		dom: '<"dt_title">fti<"dt_btn">'
	});

	$("div.dt_title").html('dom 커스텀 하기');
	$("div.dt_btn").html('<button id="btn1" class="btn btn-info pull-right">버튼1</button>');

	$('#btn1').click(function(){
		$('#example th, #example td').css("background-color",'#'+Math.random().toString(16).substr(-6))
	})
});
</script>