2022-08-19

datatables를 ajax로 사용시, 다시 불러 오고 싶을때, ajax.reload()를 사용하면 된다.

그런데, ajax로드시에 data가 바뀐채로 다시 불러오고 싶다면,
data를 아래와 같이 return 방식으로 해야 reload할 때 마다 data를 다시 넘겨 준다.

var dtt = null;
function dtt_show() {
	dtt = $('#dt_tbl').DataTable({
		ajax: {
			url: '/dtt_ajax_url'
			, type: "POST"
			, data: function (d) { 
				// 이렇게 해야 reload가 제대로 먹힘
				return $.extend({}, d, {
					"dt_id": 3,
					"dt_val" : $("#dt_val").val(),
				});
			}
			, dataSrc: function (json) {
				// ajax후에 가져온 data를 수정 할 수 있는 부분
				for(var k in json.data){
					json.data[k][4] = json.data[k][4].cut(8)
					json.data[k][10] = '-'
				}
				return json.data;
			}
			, columnDefs: [
				{
					// 데이터를 화면에 그려줄 때 컬럼별로 간섭 할 수 있는 부분
					targets: -1, // 마지막행
					orderable: false,
					render: function (this_data, type, full_data, meta) {
						// console.log(full_data)
						all_data[full_data[0]] = full_data
						return (
							full_data['id']+'('+full_data['name']+')' 
						);
					}
				}
			]
		}
	});
}

$(document).on('click', '#search_btn1', function(){
	// 버튼 이벤트시에 다시 불러오는 부분
	dtt.ajax.reload();
})

그밖에 dataSrc나 columnDefs를 이용해서 ajax로 불러온 데이터를 위처럼 가공 할 수도 있다.