Datatable - row reordering

create datatable with reordering table rows for changing row sorting order

by Justin Peszleny

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/r/dt/dt-1.10.9,rr-1.0.0/datatables.min.css">
<script src="https://cdn.datatables.net/r/dt/dt-1.10.9,rr-1.0.0/datatables.min.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Points</th>
      <th>Points</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td class="details-control" data-id="1"></td>
      <td>nidhi</td>
      <td>nidhi</td>
      <td>85</td>
      <td>85</td>

    </tr>
    <tr>
      <td>2</td>
      <td class="details-control" data-id="2"></td>
      <td>priya</td>
      <td>priya</td>
      <td>64</td>
      <td>64</td>

    </tr>
    <tr>
      <td>3</td>
      <td class="details-control" data-id="3"></td>
      <td>Johnson</td>
      <td>Johnson</td>
      <td>17</td>
      <td>17</td>

    </tr>
    <tr>
      <td>4</td>
      <td class="details-control" data-id="4"></td>
      <td>nidhi</td>
      <td>nidhi</td>
      <td>85</td>
      <td>85</td>

    </tr>

  </tbody>
</table>

CSS

td.details-control {
  background: url('https://raw.githubusercontent.com/DataTables/DataTables/1.10.7/examples/resources/details_open.png') no-repeat center center;
  cursor: pointer;
}

tr.shown td.details-control {
  background: url('https://raw.githubusercontent.com/DataTables/DataTables/1.10.7/examples/resources/details_close.png') no-repeat center center;
}

JavaScript

var table = $('#example').DataTable({
  rowReorder: true
});

$('#example').on('click', 'td.details-control', function() {
  var tr = $(this).closest('tr');
  var row = table.row(tr);
  $('#data_id').val($(this).attr('data-id'));
  if (row.child.isShown()) {
    // This row is already open - close it
    row.child.hide();
    tr.removeClass('shown');
  } else {
    // Open this row
    format(row.child);
    tr.addClass('shown');
  }
});
function format(callback) {
  callback("Hello Child There").show();
}

 $("#example tbody").on("dblclick", "tr", function () {
   alert();
 });