본문 바로가기

개발/FRONT

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

728x90

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

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

 

1
2
3
4
5
6
7
8
9
<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">
cs

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

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

 

 

 

https://datatables.net/

 

DataTables | Table plug-in for jQuery

DataTables Table plug-in for jQuery Advanced tables, instantly DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, built upon the foundations of progressive enhancement, that adds all of these advanced features to any H

datatables.net

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

 

 

데이터 테이블 생성 소스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
    //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',
        },
    })
cs

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

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

 

ordering: true//재정렬 옵션 true

 //재정렬 
        rowReorder: {

 

            dataSrc: 'seq',
        },

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

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

 

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

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

 

 

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

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

728x90