JavaScript
datatables 특정컬럼 숨기기, 내림차순정렬
sj0020
2021. 8. 18. 10:56
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
jquery datatables hide column
Is there a way with the jquery datatables plugin to hide (and show) a table column? I figured out how to reload the table data: using fnClearTable and fnAddData. But my issue is that in one of my...
stackoverflow.com