[Jquery] Jquery 데이터 테이블 (datatable) 드래그 앤 드롭(drag and drop) 사용하기 reorder

데이터테이블을 쓰면서 테이블 데이터를 드래그앤 드롭으로 이동시키고 싶을 때가 있다.

dataTable에 있는 수많은 기능 중, reordering 기능을 이용해서 컬럼을 drag and drop 할 예정이다.

 

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 
<script src="/web-resources/DataTables/datatables.min.js"></script>
<link rel="stylesheet" href="/web-resources/DataTables/datatables.min.css" />
<script src="/web-resources/dataTables.rowReorder.min.js"></script>
<link rel="stylesheet" href="/web-resources/bootstrap/css/rowReorder.dataTables.min.css" />
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

먼저 datatable을 사용하기 위한 cdn,(jquery, jquery-ui, datatables reorder)을 추가해준다.

cdn으로 추가해도 되지만, 나는 프로젝트 내부에 파일을 추가해서 사용했다.

 

 

 

https://datatables.net/

DataTables | Table plug-in for jQuery

위 링크는 datatables 관련 레퍼런스 및 cdn,파일등을 제공받을 수 있다.

 

 

데이터 테이블 생성 소스

    //datatalbe 생성 
    dt = $('#table').DataTable({
        searching: false, //검색 기능 
        responsive: true, //반응형 옵션
        sequence: [[0, 'desc']], //시퀀스 및 정렬
        ordering: true, //재정렬 옵션 true
        serverSide: false, 
        processing: true,
        ajax: {
            type: 'POST',
            url: 'info?seq='+info.seq,
            dataSrc: function(res) {
                return res.data.info;
            }
        },
        columns : [
            // 사용 컬럼 정의
            {'data': 'seq'},
            {'data': 'data'},
            {'data': 'data'},
            {'data': 'data'},
            {'data': 'data'},
            {'data': 'data'},
            {'data': 'data'},
            {'data': 'data'},
            {'data': 'data'} 
            {'data': 'data'} 
        ],
        columnDefs : [
            //데이터 return 하기 전, 데이터 가공옵션{
                // 8번 째 row 데이터를 수정하여 return 함
                "targets": 0,    
                "render": function(seq, type, full, meta) {
                                      let dom = '<input type="hidden" value="'+full.seq+'"/>'+seq;
                    return dom;
                }
            },

            {
                // 8번 째 row 데이터를 수정하여 return 함
                "targets": 8,    
                "render": function(trnSeq, type, full, meta) {
                    let dom = '<button class="btn btn-danger" onclick="deleteTraining('+info.seq+','+trnSeq+')">삭제</button>';
                    return dom;
                }
            },
//            {
//                "targets": 9,    
//                "render": function(data, type, full, meta) {
//                    return getArrowButton();
//                }
//            }
        ],
        //재정렬 
        rowReorder: {
            dataSrc: 'seq',
        },
    })

옵션 관련된 데이터들은 주석으로 설명을 달아 놓았다.

해당 글은 드래그 앤 드롭에 관한 작업을 서술하기 때문에 다른 설명은 스킵하고,

 

ordering: true, //재정렬 옵션 true

 //재정렬 

        rowReorder: {

 

            dataSrc: 'seq',

        },

해당 옵션들만 확인하면 될 것 같다.

그리고, columnDefs 내부에 0번 째에 input 태그에 id를 넘겨줌으로써, 드래그 앤 드롭을 했을 때, 데이터를 입력 받아 server에 데이터를 저장하려고 입력 받았다.

 

rowReorder 내부에 dataSrc는 server-side에서 조회해온 모든 데이터 정보가 담겨있다.

그 데이터 중, seq 컬럼에 재정렬 옵션을 부여하는 소스다.

 

 

datatables에 대한 설명없이 rowReorder 기능에 대해서만 서술하다보니, 너무 간단하게 적어 놓은 것 같다.

다음에 datatable을 사용하는 방법을 포스팅 할 예정이다.