2016-06-16

Datatables에서 한 row의 데이터를 가져오는 방법은 아래와 같다.
링크1 : https://datatables.net/reference/api/row().data()
링크2 : https://datatables.net/reference/api/rows().data()

자 그럼 위의 메뉴얼을 토대로 실제로 구현을 해보자

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

<div class="rows">
<table id="example" class="display" cellspacing="0" 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>
	</tbody>
</table>
</div>

<div id='rlt' style="border:1px solid black;margin:20px 0 0 0 ;padding:10px;"></div>


<script>
$(function(){
	var table = $('#example').DataTable();
	 
	$('#example tbody').on( 'click', 'tr', function () {
		this_row = table.rows(this).data();
		$('#rlt').html( "모든 데이터: "+table.row( this ).data()+"<br>성명:"+this_row[0][0]+"<br>직위:"+this_row[0][1]+"<br>직업:"+this_row[0][2] );
	} );
});
</script>

<div class="rows">
<table id="example2" class="display" cellspacing="0" width="100%">
	<thead>
		<tr>
			<th>성명</th>
			<th>직위</th>
			<th>직업</th>
			<th>click</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>홍길동</td>
			<td>대리</td>
			<td>프로그래머</td>
			<td><input type="button" class='btn btn-default btn-sm' value='click' onclick="c1(0)"></td>
		</tr>
		<tr>
			<td>임꺽정</td>
			<td>두목</td>
			<td>산적</td>
			<td><input type="button" class='btn btn-default btn-sm' value='click' onclick="c1(1)"></td>
		</tr>
	</tbody>
</table>
</div>

<div id='rlt2' style="border:1px solid black;margin:20px 0 0 0 ;padding:10px;"></div>

<script>
var table = '';

function c1(rows)
{
	this_row = table.rows(rows).data();
	$('#rlt2').html( "성명:"+this_row[0][0]+"<br>직위:"+this_row[0][1]+"<br>직업:"+this_row[0][2] );
}

$(function(){
	table = $('#example2').DataTable();
});
</script>