2018-12-12

일단 아래 예제를 보자

<style>
.dataTable,
.dataTable th,
.dataTable td{
	border:1px solid #ccc;
}

.dataTable{
	table-layout:fixed;
}
</style>

<div class='hsr_result'></div><div class='hsr_output1'>
<table id="b1ix_tbl1">
</table>
</div>

<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 data = [
 {"idx":"48", "company_name":"company1", "order_type":"buy1", "buy_type":"order1", "price":"111500", "amount":"17", "completion":"17", "incompletion":"0", "completion_price":"112000"},
 {"idx":"47", "company_name":"company1", "order_type":"buy1", "buy_type":"order1", "price":"56100", "amount":"60", "completion":"60", "incompletion":"0", "completion_price":"4815"},
 {"idx":"46", "company_name":"company1", "order_type":"buy1", "buy_type":"order1", "price":"56000", "amount":"100", "completion":"100", "incompletion":"0", "completion_price":"56000"},
 {"idx":"45", "company_name":"company1", "order_type":"buy1", "buy_type":"order1", "price":"99900", "amount":"20", "completion":"20", "incompletion":"0", "completion_price":"99900"},
 {"idx":"44", "company_name":"company1", "order_type":"buy1", "buy_type":"order1", "price":"21700", "amount":"10", "completion":"10", "incompletion":"0", "completion_price":"21700"},
 {"idx":"43", "company_name":"company1", "order_type":"buy1", "buy_type":"order1", "price":"9550", "amount":"20", "completion":"20", "incompletion":"0", "completion_price":"9550"}
]


var page1_list_dt = null
function page1_list(){
	var tmp1 = new Array();
	i = 0;
	$.each( data, function(key, val){
		tmp1[i] = new Array();
		tmp1[i].push(val.idx);
		tmp1[i].push(val.company_name);
		tmp1[i].push(val.order_type);
		tmp1[i].push(val.buy_type);
		tmp1[i].push(val.price);
		tmp1[i].push(val.amount);
		tmp1[i].push(val.completion);
		tmp1[i].push(val.incompletion);
		tmp1[i].push(val.completion_price);

		i++;
	});

	var tmp2 =  [
		{ title: "num", width:100},
		{ title: "회사이름", width:200},
		{ title: "주문 종류", width:100},
		{ title: "매매구분", width:100},
		{ title: "가격", width:100},
		{ title: "수량", width:100},
		{ title: "체결", width:100},
		{ title: "미체결", width:100},
		{ title: "체결 가격", width:100},
	]

	// data를 새로 불러올 경우에는 아래처럼 내용을 지우고 다시 넣어줘야 한다
	if(page1_list_dt){
		page1_list_dt.clear();
		page1_list_dt.rows.add(tmp1);
		page1_list_dt.draw();
	}
	else{
		page1_list_dt = $('#b1ix_tbl1').DataTable({
			data: tmp1
			,columns: tmp2
			,aLengthMenu: [[15, 50, -1], [15, 50, "전체"]]
			,order:[[0, 'desc']]
			,ordering:false
			,columnDefs: [
				//{className: "text-left", targets: [11]},
				// {visible: false, targets :[0]},
				// {orderable: false, targets :[0,1,2,3,4,5]}
			]
			,dom: 'ifrt'
			,scrollX: true
			,scrollY: "200px"
			,scrollCollapse: true
			,paging: false
		});
	}

}

$(function(){
	page1_list()
})
</script>

위 방식은 필자가 datatables를 ajax로 사용할때 주로 사용하는 방식이다.

datatables에는 옵션 중에 ajax옵션이 있어서, 직접 json데이터를 가져올 수 있다.
하지만 데이터의 검증이 필요 할 경우, ajax옵션을 쓰면 많은 불편함이 따르기 때문에, ajax로 따로 데이터를 가져온 뒤에, 검증을 거치고, 해당 데이터를 본문처럼 변수에 담아서 표시해 주는 방식을 쓰는게 좋다.

문제는 위처럼 scrollX: true로 하고, columns에서 width를 정의해줄 경우 th부분과 td 부분이 어긋나서 보여지는 경우가 생긴다는 거다.
Datatables의 소스를 보면 th부분과 td부분이 사실은 table로 각각 그려지고 있기 때문인데,
이에대한 해결로는 아래와 같이 css에서 table-layout:fixed;로 해주면 된다.

.dataTable{
	table-layout:fixed;
}