datatables (1)

controller

@RequestMapping(value="/selectList")
public List<testVO> selectList(testVO testvo) throws Exception{
	List<testVO> data = service.getSelectList();
    return data;
}

jsp / js

...
<table id="A_Table" style="width:100%">
	<thead>
    	<tr>
        	<th>번호</th>
            <th>제목</th>
            <th>조회수</th>
        </tr>
    </thead>
</table>
...
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>


====================================================================================


...
$(document).read(function(){
	fn_drawTable();
})

function fn_drawTable(){
	$.ajax({
    	url : "/selectList"
        ,method : "POST"     
    }).done(function(data){
    	$('#A_Table').DateTable().destroy();
   		$('#A_Table').DateTable({
        	data : data
            ,columns : [
            	{data : 'seq'}
                ,{data : 'title'}
                ,{data : 'count'}
            ] 
    	}) 
    })
}
.....

======================================================================================

 

컨트롤러에서 return 할 때 이름이 data여야 한다.

list뿐만아니라 map도 넘길 수 있다고 한다. map으로 받으면 fn_drawTable()에서 컬럼 설정할 때 모양이 달라지는 것 같다.

또,, 테이블을 그리고 난 후 컬럼의 크기나 정렬 같은 경우 검색하면 나온다.

클릭했을 때 이벤트나 버튼을 만들 수도 있다.

 

무튼 이렇게 만들었는데.

지금 읽어오는 데이터가 천건정도 되는데.. 처음에 읽어올 때 살짝 기다려야 한다. 

그래서 개선 방법을 찾다가

DataTables server-side기능이 있다는 걸 알게되어서 적용해보려고 한다.