jquery datatable 출력 및 선택, 새로 고침

jquery datatable 출력 및 선택, 새로 고침 - jquery datatable 이용한 데이터 출력

var datatable = $('#dataTables').DataTable({
	pageLength: 10,
	bPaginate: true,
	bLengthChange: true,
	lengthMenu : [ [ 5, 10, 20, 30, -1 ], [ 5, 10, 20, 30, "전체" ] ],
	bAutoWidth: false,
	processing: true,
	serverSide: false,
	searching: true,
	ajax : {
		"url":"",
		"type":"POST"
	},
	columns : [
		{data: "seq"},
		{data: "data1"},
		{data: "data2"}
	],
	columnDefs: [
	  {targets: 0, className: 'dt-body-center'}
	 ,{targets: 1, width: "75%", className: 'selectTd'}
	 ,{targets: 2, className: 'dt-body-center hidden-xs'}
	 ],
	order:[[ 0,"desc"]],
	language : lang_kor
});

- 데이터 선택 이벤트

$('#dataTables tbody').on('click', 'tr', function () {
	var data = datatable.row( this ).data();
	data.seq;
} );

- 데이터 변경

datatable.ajax.url('').load();
//datatable.search("");

- 목록 노출 시 컬럼 넒이가 이상하게 출력 되는 경우

//일정 시간 이후에(데이터 출력 후) 항목 넒이를 다시 그리게 셋팅
setTimeout(function(){datatable.columns.adjust().draw();},200);

- 전체 선택

//전체 체크박스 관련 동작(page: 'current' 옵션으로 현재 페이지만 처리)
$('#selectAll').on('click', function(){
	var rows = datatable.rows({ page: 'current'}).nodes();
	$('input:checkbox[name="seqs"]', rows).prop('checked', this.checked);
});

- 목록 생성 시 체크박스, 버튼 추가 render 옵션으로 작업

columnDefs: [{
	targets: 0,
	searchable: false,
	orderable: false,
	className: 'dt-body-center',
	render: function (data, type, full, meta){
		return '';
	}
 }
 ,{targets: 2, className: 'dt-body-center'}
 ,{targets: 3, className: 'dt-body-center'}
 ,{targets: 4, className: 'dt-body-center hidden-xs'}
 ,{targets: 5, className: 'dt-body-center hidden-xs'}
 ,{targets: 6, className: 'dt-body-center hidden-xs'}
 ,{
	targets: 7,
	searchable: false,
	orderable: false,
	className: 'dt-body-center dt-body-button',
	render: function (data, type, full, meta){
		var buttonHtml = "
";
		buttonHtml = buttonHtml+"";
		buttonHtml = buttonHtml+"";
		buttonHtml = buttonHtml+"
";
		return buttonHtml;
	}
 }
 ]