language : {
emptyTable: "데이터가 없습니다.",
lengthMenu: "_MENU_",
info: "현재 _START_ - _END_ / 총 _TOTAL_건",
infoEmpty: "데이터 없음",
infoFiltered: "( _MAX_건의 데이터에서 필터링됨 )",
loadingRecords: "로딩중...",
processing: "잠시만 기다려 주세요...",
paginate: {
"next": "다음",
"previous": "이전"
},
select: {
rows: ""
}
}
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: {
url: 실제url,
type:"GET",
dataSrc: ''
}
ajax: '../server_side/scripts/server_processing.php' //json형식으로 데이터가 있는 file
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;
} );
}