JavaScript/JQuery
DataTables rowReorder 옵션 사용하기(테이블 재정렬)
BBB.OOO
2022. 7. 26. 10:03
반응형
가장 중요한 ordering의 옵션을 true로 설정한다.
그 다음 rowReorder 옵션에 dataSrc 속성을 통해 순서 재정렬을 위한 seq 번호를 설정한다.
* ordering 옵션을 설정 안할경우 테이블 리스트의 순서가 변경되지 않는다.
let bannerDataTableOption = {
scrollCollapse : false,
select : false,
language:eval(datatable_lang),
dom : "t",
autoWidth: false,
ordering: true,
searching: false, // 검색 기능
paging: false, //페이징 기능
processing: true,
rowReorder: {
dataSrc: 'b_seq',
},
columns: [
{ "data": "b_seq", "className": "text_center" },
{ "data": null, "className": "text_center" },
{ "data": "b_name", "className": "text_center" },
{ "data": "b_file_name", "className": "text_center" },
{ "data": "b_desc", "className": "text_center" },
{ "data": "start_date", "className": "text_center" },
{ "data": "end_date", "className": "text_center" },
{ "data": "url_external_yn", "className": "text_center"},
{ "data": "applied_yn", "className": "text_center"}
],
columnDefs: [
{ title: "b_seq", targets : 0, visible: false },
{ title: "노출 순번", targets : 1,
render: function(data, type, row, meta){
return meta.row+1;
}
},
{ title: "배너 이름", targets : 2 },
{ title: "배너 파일명", targets : 3 },
{ title: "배너 설명", targets : 4},
{ title: "시작 일시", targets : 5,
render: function(data, type, row, meta){
return dateFormatCheck(data);
}
},
{ title: "종료 일시", targets : 6,
render: function(data){
return dateFormatCheck(data);
}
},
{ title: "링크 구분", targets : 7,
render: function(data, type, row, meta){
return data == 1 ? "내부링크" : '외부링크';
}
},
{ title: "적용상태", targets: 8,
render: function(data, type, row, meta){
return data == 1 ? '적용' : '미적용'
}
},
],
data: /*[[${banner_list}]]*/ ""
};
banner_dataTable = $("#manager-banner-table").DataTable(bannerDataTableOption);
반응형