RowReorder Test

by ChakronSA

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/r/dt/jq-2.1.4,dt-1.10.9,cr-1.2.0,fc-3.1.0,fh-3.0.0,r-1.0.7,rr-1.0.0,sc-1.3.0/datatables.min.css">
<script src="https://cdn.datatables.net/r/dt/jq-2.1.4,dt-1.10.9,cr-1.2.0,fc-3.1.0,fh-3.0.0,r-1.0.7,rr-1.0.0,sc-1.3.0/datatables.min.js"></script>
<table id="myTable">
  <thead>
    <tr>
      <th>Order</th>
      <th>Name</th>
      <th>Delete</th>
    </tr>
  </thead>
  <tbody>
    <tr id="dragrow">
      <td id="counter">1</td>
      <td>Name 1</td>
      <td><a href="#" class="myTableDeleteRow">Delete</a></td>
    </tr>

    <tr id="dragrow">
      <td id="counter">2</td>
      <td>Name 2</td>
      <td><a href="#" class="myTableDeleteRow">Delete</a></td>
    </tr>

    <tr id="dragrow">
      <td id="counter">3</td>
      <td>Name 3</td>
      <td><a href="#" class="myTableDeleteRow">Delete</a></td>
    </tr>

    <tr id="dragrow">
      <td id="counter">4</td>
      <td>Name 4</td>
      <td><a href="#" class="myTableDeleteRow">Delete</a></td>
    </tr>

    <tr id="dragrow">
      <td id="counter">5</td>
      <td>Name 5</td>
      <td><a href="#" class="myTableDeleteRow">Delete</a></td>
    </tr>

  </tbody>
</table>

JavaScript

var table = $('#myTable').DataTable({
  rowReorder: {
    selector: 'tr td:not(:last-child)'
  },
  bPaginate: false,
  bFilter: false,
  bInfo: false,
  columnDefs: [{
    targets: 1,
    visible: true
  }]
});

$(document).on("click", ".myTableDeleteRow", function() {
  table
    .row($(this).parents('tr'))
    .remove()
    .draw(false);
    
    $.each($('#myTable tr td:first-child'),function(index,val){
      $(this).html(index+1)
    });
});