2022-08-18 DataTable 이용하여 회사업무..

오늘은 DataTable 을 이용하여 테이블을 그렸다. 

이전에 사용할때에는 그저 데이터를 가공하여 보여주기만 하면 되는 기능이였는데,

이번에는 데이터 가공하여 보여주는 부분은 보여주고 또 입력을 받아야 하는 부분들이 필요하였다. 

<div> 태그를 사용해서 Table을 만들까 생각도 했지만 DataTable UI 가 전체적으로 깔려 있기도 하고

Data Table 이 데이터를 뿌려주기에 편하기도 해서 이 방법으로 계속 해나갔다. 

Map Type 으로 Reutrn 해주어 Data를 뿌려주고 입력을 받아야 하는 <td> 태그에는 따로 필요한 데이터 전체의 값을 받는 ajax 호출을 하여 return 값을 받아서 <Select> 하위 태그인 <option>에 반복문을 돌려 String 값으로 받아준 후 jsp 로 던져주었다. 코드 없이 말로 적기에는 이해가 잘 안갈수도 있지만 회사 코드를 보여줄수 없기에 간단하게만 적어본다.

function getfunc(){
var testHtml = "<select>";

$.ajax({
	url : "test/test",
    type : "POST",
    Data : {
    	Data_list : "DataList",
    },
    success : function(data){
    	data.test.forEach(function(item, index, arr){ // 기억나는데로 적어서 틀릴수도.. 
			html += '<option value="' + item.test_code + '">' + item.test_name + '</optiom>'
        });
        html += </select>;
    }
    
    
    // 데이터 테이블 뿌려주기
    // 기존 데이터는 컬럼에 맞게 뿌려주고 위의 html이 필요한 부분은 render의 return 값을 html로 주어 진행.
    $("#dataTable").dataTable()
});
};