html
<table id="example2" class="table table-bordered table-striped">
<!-- example1은 선택 가능 search 기능 까지있다. -->
<thead>
<tr>
<th>no</th>
<th>대분류</th>
<th>제작품코드</th>
<th>제작품이름</th>
<th>제작품등록일</th>
<th>완제품확인</th>
</tr>
</thead>
</table>
js
var table = $('#example2').DataTable( {
"processing": true,
"destroy":true, //이거 추가하면 추가검색 가능
ajax: {
type: 'post',
url: './forms/product_data_ajax.php',
data : {
pro_mat : '',
},
dataSrc : '',
},
// console.log(data);
columns : [
{data: "pro_code"},
{data: "pro_category"},
{data: "pro_code",
"render": function(data, type, row, meta){
if(type === 'display'){
data = '<a href="#" onclick=open_order'+'('+'"'+data+'"'+')'+'>'+data+'</a>';
}
return data;
}
},
{data: "pro_name"},
// 등록일를 내림차순 등록위해 컬럼에 넣되, 아래에 안보이게 설정(table.column(4).visible(false);)
{data: "pro_registDate"},
{data: "pro_name",
"render": function(data, type, row, meta){
if(type === 'display'){
data = '<button type="button" class="btn btn-block btn-outline-info btn-flat" onclick=finished_product_check'+'('+'"'+data+'"'+')>선택</button>';
}
return data;
}
},
],
'columnDefs': [{
'targets': 0,
'searchable': false,
'orderable': false,
'className': 'dt-body-center',
'render': function (data, type, full, meta){
return '<input type="checkbox" name="id[]" class="chk" value="' + $('<div/>').text(data).html() + '">';
}
},
],
// 최신등록 순별로 내림차순
'order': [[4, 'desc']],
});
// 등록날짜 안보이게 설정
table.column(4).visible(false);
table.column(4).visible(false);
이렇게도 할 수 있고
아래처럼 columnDefs 안에 넣어 줄 수도 있다
var table = $('#example2').DataTable( {
"processing": true,
"destroy":true, //이거 추가하면 추가검색 가능
ajax: {
type: 'post',
url: './forms/product_data_ajax.php',
data : {
searching : searching,
searching_type : searching_type,
},
dataSrc : '',
},
columns : [
{data: "pro_code"},
{data: "pro_category"},
{data: "pro_code",
"render": function(data, type, row, meta){
if(type === 'display'){
data = '<a href="#" onclick=open_order'+'('+'"'+data+'"'+')'+'>'+data+'</a>';
}
return data;
}
},
{data: "pro_name"},
{data: "pro_registDate"},
{data: "pro_name",
"render": function(data, type, row, meta){
if(type === 'display'){
data = '<button type="button" class="btn btn-block btn-outline-info btn-flat" onclick=finished_product_check'+'('+'"'+data+'"'+')>선택</button>';
}
return data;
}
},
],
'columnDefs': [{
'targets': 0,
'searchable': false,
'orderable': false,
'className': 'dt-body-center',
'render': function (data, type, full, meta){
return '<input type="checkbox" name="id[]" class="chk" value="' + $('<div/>').text(data).html() + '">';
}
},
{
"targets": [ 4 ],
"visible": false,
"searchable": false
}
],
'order': [[4, 'desc']],
// 밑에 총가격나타냄
});
초ㅣ종코드는 두번째 방법을 사용함
옵션에서 보이지 ㅇ낳게 해놓았기 때문에 보이지는 않지만
숨겨진 컬럼 기준으로 desc가 먹여져있다
https://stackoverflow.com/questions/5654633/jquery-datatables-hide-column
'JavaScript' 카테고리의 다른 글
select 태그 option 값 가져오기 (0) | 2021.08.25 |
---|---|
input text box 특수문자 입력 제한 / 입력 시 이전값으로 되돌아가기 (0) | 2021.08.19 |
창크기 자식창에서 부모창의 함수로 새 창 열때 크기 (0) | 2021.08.17 |
배열 중복제거 (0) | 2021.08.13 |
자바스크립트 input type, name 변경 (0) | 2021.08.05 |