일단 예제를 보자.
<style>
.red{
color:red;
font-weight:bold;
}
.blue{
color:blue;
}
.green{
color:green;
}
</style>
<link rel="stylesheet" href="/post_inc/datatables/jquery.dataTables.min.css">
<link rel="stylesheet" href="/post_inc/datatables/dataTables.bootstrap.min.css">
<script src="/post_inc/datatables/jquery-1.12.3.js"></script>
<script src="/post_inc/datatables/jquery.dataTables.min.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>번호</th>
<th>성명</th>
<th>년도</th>
<th>숨김</th>
</tr>
</thead>
</table>
<script>
$(function(){
example_datatables = null;
if(example_datatables) example_datatables.destroy();
example_datatables = $('#example').DataTable({
processing: true
// serverSide가 true 일 경우 페이징, 정렬, 검색이 서버(backend)에서 일어난다.
,serverSide: true
,retrieve: true
,stateSave: false
,paging: true
,lengthChange: true
/*,pageLength: 5*/
,aLengthMenu: [[5, 10, 25, -1], [5, 10, 25, "All"]]
,searching: false
,dom: '<"top"i>rt<"bottom"lp><"clear">'
,autoWidth: false
,columnDefs: [
{className: "text-left", targets: [2]},
{visible: false, targets :[3]},
{orderable: false, targets :[1,2]}
]
,"order" : [[0, "desc"]]
,ajax: {
url: "/post_inc/ajax_sleep/datatables_data1.php"
,type: "POST"
// serverSide옵션이 true일 경우 data에서 값을 보낼때,
// backend에서 처리 될 것들도 같이 보내기 때문에,
// 아래처럼 기존의 datatables에서 쓰이는 데이터에
// 자신이 추가할 데이터를 추가 하는 형식으로 써야 한다.
,data: function(d){
tmp = new Object;
tmp.datatables = 1;
tmp = $.extend(tmp, d);
return tmp;
}
,dataSrc:function(data){
// ajax통신후에 서버(backend)에서 받아온 데이터를 가공할 수 있는 부분
return data;
}
}
,columns: [
{"data": "no"}
,{"data": "name", "className":"blue"}
,{"data": "year"}
,{"data": "non_visible"}
]
,initComplete : function (settings, json){
$('.c_y1').addClass('red');
$('.c_y2').addClass('blue');
$('.c_y3').addClass('green');
}
});
});
</script>
위 방식은 ajax로 Datatables를 쓸 경우 중 하나로, paging, order 이벤트 모두를 ajax로 처리 하는 방식이다.
핵심 부분만 설명 하자면,
,data: function(d){
tmp = new Object;
tmp.datatables = 1;
tmp = $.extend(tmp, d);
return tmp;
}
위의 소스에서 파라미터로 넘어온 d의 값은 아래와 같다.(print_r($_POST);로 출력한 값이다.)
Array
(
[datatables] => 1
[draw] => 1
[columns] => Array
(
[0] => Array
(
[data] => no
[name] =>
[searchable] => true
[orderable] => true
[search] => Array
(
[value] =>
[regex] => false
)
)
[1] => Array
(
[data] => name
[name] =>
[searchable] => true
[orderable] => false
[search] => Array
(
[value] =>
[regex] => false
)
)
[2] => Array
(
[data] => year
[name] =>
[searchable] => true
[orderable] => false
[search] => Array
(
[value] =>
[regex] => false
)
)
[3] => Array
(
[data] => non_visible
[name] =>
[searchable] => true
[orderable] => true
[search] => Array
(
[value] =>
[regex] => false
)
)
)
[order] => Array
(
[0] => Array
(
[column] => 0
[dir] => desc
)
)
[start] => 0
[length] => 5
[search] => Array
(
[value] =>
[regex] => false
)
)
넘어온 값들을 보면 알겠지만, 페이징에 필요한 start, length 값과, order에 필요한 column, dir값들이 포함되어 있다.
그래서 이렇게 넘어온 값을 가지고 "/post_inc/ajax_sleep/datatables_data1.php"페이지를 아래와 같이 꾸미면 된다.
<?php
$data = array(
array( 'no'=>'1', 'name'=>'a', 'year'=>"<span class='c_y1'>2016</span>", 'non_visible'=>'100')
,array( 'no'=>'2', 'name'=>'b', 'year'=>"<span class='c_y2 blue'>2016</span>", 'non_visible'=>'100')
,array( 'no'=>'3', 'name'=>'c', 'year'=>"<span class='c_y1'>2016</span>", 'non_visible'=>'100')
,array( 'no'=>'4', 'name'=>'d', 'year'=>"<span class='c_y1'>2016</span>", 'non_visible'=>'100')
,array( 'no'=>'5', 'name'=>'e', 'year'=>"<span class='c_y2 blue'>2016</span>", 'non_visible'=>'100')
,array( 'no'=>'6', 'name'=>'f', 'year'=>"<span class='c_y3'>2016</span>", 'non_visible'=>'100')
,array( 'no'=>'7', 'name'=>'g', 'year'=>"<span class='c_y1'>2016</span>", 'non_visible'=>'100')
,array( 'no'=>'8', 'name'=>'h', 'year'=>"<span class='c_y2 blue'>2016</span>", 'non_visible'=>'100')
,array( 'no'=>'9', 'name'=>'i', 'year'=>"<span class='c_y1'>2016</span>", 'non_visible'=>'100')
,array( 'no'=>'10', 'name'=>'j', 'year'=>"<span class='c_y1'>2016</span>", 'non_visible'=>'100')
,array( 'no'=>'11', 'name'=>'k', 'year'=>"<span class='c_y2 blue'>2016</span>", 'non_visible'=>'100')
,array( 'no'=>'12', 'name'=>'l', 'year'=>"<span class='c_y3'>2016</span>", 'non_visible'=>'100')
);
if( $_POST['order'][0][dir] == 'desc' ) arsort($data);
else if( $_POST['order'][0][dir] == 'asc' ) asort($data);
$p_data = array_slice($data, $_POST['start'], $_POST['length']);
$echo_data = array(
'recordsFiltered' => count($data)
,'data' => $p_data
);
echo json_encode($echo_data);
?>
보여주기 쉽게 하려고 $data라는 배열에 이미 여러가지 값을 넣은뒤에 php함수로 order와 paging을 구현해 보았다.
DB에서 값을 뽑아오는 경우라면 mysql의 경우 limit나 order문에 위 값들을 대입 시켜 주면 된다.