테이블 설정

언어(한글화)

language : {
  emptyTable: "데이터가 없습니다.",
  lengthMenu: "_MENU_",
  info: "현재 _START_ - _END_ / 총 _TOTAL_건",
  infoEmpty: "데이터 없음",
  infoFiltered: "( _MAX_건의 데이터에서 필터링됨 )",
  loadingRecords: "로딩중...",
  processing:     "잠시만 기다려 주세요...",
  paginate: {
  	"next": "다음",
	"previous": "이전"
  },
  select: {
    rows: ""
  }
}

columns 와 columnDefs

columns: [
{ data: "id" , width: '10%'},
{ data: "phrase" , width: '75%'},
{
  defaultContent: "-", // 값이 없을때
  orderable: false, //정렬
  className: 'button',
  width: '10%', // 가로 값
  targets:   2, // 몇번째 컬럼
  render: function (data, type, row){// data: 데이터, row: 표현되는 줄에 다른 값 접근 가능
    const keywordId= row.id;
    return '<button onclick=\"alert("아이디는 '+keywordId+'");\">버튼</button>';// 이 부분이 실제로 표현됨
    }
  }
]

columnDefs = [
  { targets: 0, width: '6%',}, // 0번째를 6%로 설정
  { targets: 1, width: '7%',},
  { targets: 2, width: '11%',}
]

columns만 쓸 수도 있고, columnDefs와 같이 쓸 수도 있음

속성이름	설명
width	가로길이 설정, ex) 59% , 110(px)
targets	어떤 컬럼인지 지정, ex) 1
responsivePriority	반응형에서 사용되는 순서 값 ex) 59%
visible	해당 컬럼을 보이게 할지 ex) true
data	받아온 데이터의 컬럼명 ex) id , username

반응형

• 기능 설정

//반응형 화면이 작을때 너무 많은 내용이면 몇개의 컬럼만 남기고 안보이게함 (+버튼을 누르면 보이게됨)
responsive:false

• 반응형이 될 때 화면에 맞춰서 사라질 컬럼 순서 지정

columnDefs:[
  {responsivePriority : -3 , targets: 1},
  {responsivePriority : -2 , targets: 2},
  {responsivePriority : 10009 , targets: 3},
  {responsivePriority : 10008, targets: 4},
  {responsivePriority : 10007 , targets: 5},
  {responsivePriority : 10006 , targets: 6},
  {responsivePriority : 10005 , targets: 7},
  {responsivePriority : 10004 , targets: 8},
  {responsivePriority : 10003 , targets: 9},
]

columnDefs에 responsivePriority값을 지정
숫자가 큰 숫자일 수록! 먼저 사라짐, 음수는 사라지지 않게!
근데 정확하지 않은 내용인건지 음수인것도 화면이 너무 작으면 사라지거나 순서가 약간 다름

그 외 기능

//////// 기본기능
// 표시 건수(기본값 true)
lengthChange: false,
// 검색(기본값 true)
searching: false, //filter와 같은 듯?
// 정렬(기본값 true)
ordering: false, 
// 정보 표시(기본값 true)
info: false,
// 페이징(기본값 true)
paging: false,
  
  
// 그 외 설정
// 한 페이지에 보여줄 row 개수, 처음 화면
pageLength: 10,
//자동으로 width 변경(기본값 true)
autoWidth:false,
// 정렬 기준, 처음 화면
order: [[ 0, "asc" ]] // 다중시 [ [ 0, "asc" ], [ 1, "desc"] ]
// 기본 기능의 위치 변경 시
dom:<"#table_top.col-sm-12"<"col-sm-10"i><"col-sm-2"l>>tp //i(info)f(filter)l(length change)t(table)p(paging)

DOM 참고
https://datatables.net/reference/option/dom
https://datatables.net/examples/basic_init/dom.html

데이터

ajax

ajax: { 
  url: 실제url,
  type:"GET", 
  dataSrc: ''
}

ajax: '../server_side/scripts/server_processing.php' //json형식으로 데이터가 있는 file

HTML

data

이벤트

자동으로 번호

drawCallback: function( settings ) {
  var api = this.api();
  var num = 1;
  api.rows().every( function () { // rows({page:'current'})
    $(this.node()).find('td').eq(0).html(num);
    num = num + 1;
  } );
}