DataTable | DataTable - 옵션
페이지 정보
작성자 박석영 작성일21-07-09 17:55 조회339회 댓글0건관련링크
본문
dom : 'Blfrtip',
"aaSorting": [[6, "desc"]], /* 첫 정렬*/
"processing": true,
"searching": false, /*검색*/
"scrollX": true,
'serverSide': true,
"aaSorting": [[2, "desc"]], /* 첫 정렬*/
"responsive": true , // 반응형, 폭이 좁아지면 + 기호가 표시되고, 클릭하면 하단에 나머지 컬럼이 보인다.
"autoWidth": true, // 컬럼 자동 폭 조정
"ordering": false , // 정열을 사용 안함.
"paging" : false , // 페이징이 없어서 rows.add 해도 계속 보이게 된다.. 자체 페이징을 안하게 되어서.
"scrollX": true, // 스크롤바
"scrollY": true, // 스크롤바
"scrollCollapse":true ,//// Allow the table to reduce in height when a limited number of rows are shown.
"deferRender" : true, // Elements will be created only when the are required
"columns": [ // data 와 연동하기 위해 테비블의 컬럼명을 정의, 화면에 보이는 td와 동일해야 한다.
{"data": 'code' ,
"orderable": false , // 정열 안함.. 기본은 true
"visible": true // 컬럼 보임 여부
[columnDefs] : 셀 값 옵션 기능
{
"targets" : [8],
"orderable" : false,
"searchable": false,
"className" : "alRight",
"visible" : "false",
"render" : function ( data, type, row ) {
var rdata = parseInt(data);
if(!rdata) {
return "무료";
} else {
str = String(data);
return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,');//콤마찍기
}
}
}
[로딩시 처리]
initComplete: function () {
myDatatable.page(0).draw('page');
}
[다시 그리기]
Datatable.columns.adjust().draw();
[로딩시 데이터값 처리]
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
if ( aData["MT_CONFIRM"] != "Y" )
{
$('td', nRow).css('background-color', '#FFCC00');
}
}
[선택된 데이터 값 가져오기]
var md_data = myDatatable.row( '.selected' ).data();
[클릭 블럭 선택 1개]
$('#example1 tbody').on( 'click', 'tr', function () {
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
myDatatable.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
} );
[클릭 블럭 선택 멀티]
$('#example1 tbody').on( 'click', 'tr', function () {
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
} else {
myDatatable.$('selected').removeClass('selected');
$(this).addClass('selected');
}
} );
"aaSorting": [[6, "desc"]], /* 첫 정렬*/
"processing": true,
"searching": false, /*검색*/
"scrollX": true,
'serverSide': true,
"aaSorting": [[2, "desc"]], /* 첫 정렬*/
"responsive": true , // 반응형, 폭이 좁아지면 + 기호가 표시되고, 클릭하면 하단에 나머지 컬럼이 보인다.
"autoWidth": true, // 컬럼 자동 폭 조정
"ordering": false , // 정열을 사용 안함.
"paging" : false , // 페이징이 없어서 rows.add 해도 계속 보이게 된다.. 자체 페이징을 안하게 되어서.
"scrollX": true, // 스크롤바
"scrollY": true, // 스크롤바
"scrollCollapse":true ,//// Allow the table to reduce in height when a limited number of rows are shown.
"deferRender" : true, // Elements will be created only when the are required
"columns": [ // data 와 연동하기 위해 테비블의 컬럼명을 정의, 화면에 보이는 td와 동일해야 한다.
{"data": 'code' ,
"orderable": false , // 정열 안함.. 기본은 true
"visible": true // 컬럼 보임 여부
[columnDefs] : 셀 값 옵션 기능
{
"targets" : [8],
"orderable" : false,
"searchable": false,
"className" : "alRight",
"visible" : "false",
"render" : function ( data, type, row ) {
var rdata = parseInt(data);
if(!rdata) {
return "무료";
} else {
str = String(data);
return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,');//콤마찍기
}
}
}
[로딩시 처리]
initComplete: function () {
myDatatable.page(0).draw('page');
}
[다시 그리기]
Datatable.columns.adjust().draw();
[로딩시 데이터값 처리]
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
if ( aData["MT_CONFIRM"] != "Y" )
{
$('td', nRow).css('background-color', '#FFCC00');
}
}
[선택된 데이터 값 가져오기]
var md_data = myDatatable.row( '.selected' ).data();
[클릭 블럭 선택 1개]
$('#example1 tbody').on( 'click', 'tr', function () {
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
myDatatable.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
} );
[클릭 블럭 선택 멀티]
$('#example1 tbody').on( 'click', 'tr', function () {
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
} else {
myDatatable.$('selected').removeClass('selected');
$(this).addClass('selected');
}
} );
[주소복사] https://www.goodsweb.kr/?u=D41ANyr
SNS 알리기
핀터레스트
텔레그램로
블로그로
페이스북
트위터
카카오스토리
카톡 공유
관련 블로그
로딩중