2019-07-09

Datatables에서 "bStateSave"옵션을 true로 하면, Datatables에서 사용되는 각종 이벤트들이 유지 된다.
예를들어, 특정 컬럼을 클릭하여 순서를 변경하거나, 2페이지로 가는 버튼을 클릭한다거나 한뒤에 페이지를 새로고침 해보자
특정 컬럼이 계속 그 순서가 유지되어 있고, 여전히 2페이지로 유지되어 있을 것이다.
이런 값들은 localStorage에 저장 되는데, 그래서 개발자 도구의 console에서 localStorage.clear()를 입력하고 새로고침을 하면 전부 초기화 되어 있는 것을 발견 할 수 있다.
그리고, 이런 초기화를 해주는 옵션이 state.clear() 이다.
아래 예제로 이것저것 눌러본다음에, 새로고침을 하고, "초기화 버튼"을 누른뒤에 다시 초기화 해보면, 바로 알 수 있을 것이다.

<link rel="stylesheet" href="/post_inc/datatables/jquery.dataTables.min.css">
<script src="/post_inc/datatables/jquery.dataTables.min.js"></script>
<script type="text/javascript">
var dt1 = null
$(function() {
	dt1 = $('#example').DataTable({
		bStateSave: true,
		aLengthMenu: [[2,-1], ["2","전체"]]
	});

	$('#init_btn').click(function(){
		dt1.state.clear()
	})

});
</script>

<button type="button" id="init_btn">초기화 버튼</button><br><br>

<table id="example" style="width:100%">
	<thead>
		<tr>
			<th>Name</th>
			<th>Position</th>
			<th>Office</th>
			<th>Age</th>
			<th>Start date</th>
			<th>Salary</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Tiger Nixon</td>
			<td>System Architect</td>
			<td>Edinburgh</td>
			<td>61</td>
			<td>2011/04/25</td>
			<td>$320,800</td>
		</tr>
		<tr>
			<td>Garrett Winters</td>
			<td>Accountant</td>
			<td>Tokyo</td>
			<td>63</td>
			<td>2011/07/25</td>
			<td>$170,750</td>
		</tr>
		<tr>
			<td>Ashton Cox</td>
			<td>Junior Technical Author</td>
			<td>San Francisco</td>
			<td>66</td>
			<td>2009/01/12</td>
			<td>$86,000</td>
		</tr>
		<tr>
			<td>Cedric Kelly</td>
			<td>Senior Javascript Developer</td>
			<td>Edinburgh</td>
			<td>22</td>
			<td>2012/03/29</td>
			<td>$433,060</td>
		</tr>
	</tbody>
</table>