[자바 스프링]datatables -데이터테이블스 사용법(data tables usage)

     개발환경(development environment)

• 스프링(Spring)
• JSP
• javascript
• jquery

---

★아무런 데이터 삽입 없이 데이터테이블스만을 생성(Create only data tables without data)

var test_table = $('#test_table').DataTable({
    paging: false,      
    info:false,	        
    bPaginate: false,   
    responsive: true,
    processing: false,
    ordering: true, 
    serverSide: false,
    searching: ture,
    autoWidth:false,
    destroy: true,		//테이블 재생성 옵션(table regeneration option)
    defaultContent:"-"
}).clear().draw();

---

★Ajax를 활용한 데이터테이블스 그리기(Create only data tables using ajax)

var test_table = $('#test_table').DataTable({
    paging: true,
    info:true,
    bPaginate: true,
    responsive: true,
    processing: true, 
    ordering: true, 
    serverSide: false,
    searching: true,
    autoWidth:true,
    destroy: true,
    defaultContent:"-",
    columnDefs: [
        {visible : false, targets: [0]}
        //불러온 컬럼 중 0에 속하는 컬럼을 숨김처리 합니다.(예시:pk 값으로 뽑아쓸 때 사용)
        // Hide the column belonging to 0 of the columns that have been called in (ex: used to extract as pk values)
    ],
    ajax: {
        async : false,
        url: "/test/mapping_uri",
        data: function(request_param) {
                request_param.anyList_no = 1; //ajax로 데이터 통신 시 파라미터를 보낼 때 사용
                							 //Use to send parameters to ajax when communicating data
        }
    },
    columns: [
        {"data": "hidden_data"}, //columnDefs에 설정에 의해 숨겨질 컬럼 데이터 입니다.
        						//Column data to be hidden by setting in columnDefs.
        {"data": "anyList_no"}, //일반적으로 데이터만 불러올 때
        						//Generally, when you only bring in data
        {"data": "anyList_col_1","render": $.fn.dataTable.render.number(',')}, //금액 정보(세자리 콤마)
        																	   //The amount information (three-digit comma)
        {"data": "anyList_col_2","render": taxApply}, //taxApply -> 함수명 입니다.
        											  //TaxApply - > Function name.
    ],
    initComplete: function(data) { //일반적인 ajax 옵션을 더 추가하든 제거하든 편한데로 사용하면 됩니다.
    							   //Add or remove more common ajax options, or use them as a convenient option.
        if(data.result == true){
			alert('success');
        }else{
        	alert('fail');
    	}
    }
)};


function taxApply(val){
	//val -> 파라미터(parameters)
    //과세적용 또는 필요한 작업을 한다.(Taxation application or necessary work is done.)
	
    let result = val; 
    return result;
}

 

---

★HTML

<table id="test_table" class="none">
	<thead>
		<tr>
            <th>hidden_col</th>
            <th>col_1</th>
            <th>col_2</th>
            <th>col_3</th>
    	</tr> 
    </thead>
</table>