[JQuery] Reorder row Datatable Drag and Drop

■ JQuery  Reorder row Datatable Drag and Drop

Datatable (데이터테이블) tr (행)드래그하여 순서 변경

---

■ JS & CSS

<!-- js -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/rowreorder/1.2.7/js/dataTables.rowReorder.min.js"></script>

<!-- css -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowreorder/1.2.7/css/rowReorder.dataTables.min.css"/>

 

■ Datatable

var dataTable = $('#data-table').DataTable( {
  rowReorder: {
    selector: 'tr',
    update: true
  }
});

 

■ Drag and Drop Event

dataTable.on( 'row-reorder', function ( e, diff, edit ) {
  for ( var i=0, ien=diff.length ; i<ien ; i++ ) {
     // get id row
     let idQ = diff[i].node.id;
     let idNewQ = idQ.replace("row_", "");
     // get position
     let position = diff[i].newPosition+1;
     //call funnction to update data
     updateOrder(idNewQ, position);
  }
 } );