DataTables rowReorder 옵션 사용하기(테이블 재정렬)

가장 중요한 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);