[Ajax] DataTable 옵션 및 사용법

 

DataTable은 간편하게 데이터들을 테이블 형태로 나타낼 수 있다. DataTable에서 제공하는 옵션들이 있기에 오늘은 해당 옵션들을 정리해보고자 한다.

 

	var table = ('#Table').DataTable({
		"destory": true, // 테이블 재생성
		"paging": true, // 페이징 처리
		"ordering": true, // 컬럼별 정렬 기능
		"autoWidth": false, // 가로 자동
		"pageLength": 50, // 기본 데이터 건수
		"lengthMenu": [[50, 100, 1000], [50, 100, "Max(1000)"]], // 데이터건수 옵션
		"order": [15, 'desc'],
		"searching": false, // 검색
		"scrollX": true, // 가로 스크롤
		"ajax": function(data, callback, settings) {// ajax 호출
			$ajax({
				url: "data.do",
				data: {
					params: JSON.stringify({
						id: id
					})
				},
				success: function(res) {
					// 받아온 데이터 조작
					// 콜백 함수에 파라미터 데이터
					callback(res);
				}
			});
		},
		"columns": [ // 받아온 데이터의 이름 
			{ "data": "id", "defaultContent": "", "className": "left" },
			{ "data": "name", "defaultContent": "" }
		],
		"columnDefs": [ // 컬럼 조작
			{
				"width": "1em", // 가로 길이
				"title": "ID", // 컬럼 제목
				"targets": 1, // 데아터 타겟
				"orderable": false // 해당 컬럼만 정렬 기능 사용 안함
			},
			{
				"width": "1em",
				"title": "ID",
				"targets": 2
			}
		]
	})