jquery dataTable переупорядочить плагин перетаскивания работает, но падение не работает

Question

Я использую jquery.dataTables.rowReordering.js плагины, чтобы изменить порядок моих данных Перетаскивание работает, но падение не работает, оно переходит в ту же позицию, что и мышь. Ниже приведен код.

<table class="table-bordered table dataTable" id="hotbuystable"> 
      <thead> 
      <tr> 
       <th>Image</th> 
       <th>Brand Name</th> 
       <th>Product Name</th> 
       <th>Priority</th> 
       <th>Remove</th> 
      </tr> 
      </thead> 
      <tbody> 

      <?php $count=0; foreach($getHotBuys as $keys => $item) { 
       $count=$count+1; 
       $cid = $item['phone_id']; 
       echo "<tr data-position='$count' id='$cid'>"; 
       echo "<td><img src='" . $item['image'] . "' width='50px' height='50px'></td>"; 
       echo "<td>" . $item['brand_name'] . "</td>"; 
       echo "<td>" . $item['product_name'] . "</td>"; 
       echo "<td>" . $item['score'] . "</td>"; 
       echo "<td id='$cid'><a href='#' class='rowtag' id='$cid'><i class=\"fa fa-times fa-1x\"></i></a></td>"; 
       echo "</tr>"; 
      } 
      ?> 
      </tbody> 
     </table> 
    </div> 
</div> 
</div> 
</body> 
<script type="text/javascript" src="assets/js/plugins/jquery.min.new.js"> </script> 
<script type="text/javascript" src="assets/js/lib/jquery-ui.js"></script> 
<script type="text/javascript" src="assets/js/plugins/jquery-select2/select2.min.js"></script> 
<script type="text/javascript" src="assets/js/plugins/jquery-datatables/jquery.dataTables.js"></script> 
<script src="assets/js/lib/jquery.dataTables.rowReordering.js"></script> 

jQuery(function ($) { 

    'use strict'; 

    $('#hotbuystable').dataTable({ 
     "bPaginate": false, 
     "bFilter": false, 
     "bInfo": false, 
     "bSort": false 
    }).rowReordering(); 
}); 

Не могли бы вы заметить, что такое ошибка.

Answer 1

rowReorder требует, чтобы у вас есть индексный столбец и дайте все <tr> уникальным id. У вас уже есть id на строках, так:

<tr> 
    <th>#</th> 
    <th>Image</th> 
    <th>Brand Name</th> 
    <th>Product Name</th> 
    <th>Priority</th> 
    <th>Remove</th> 
</tr> 

...

<?php $count=0; foreach($getHotBuys as $keys => $item) { 
    $count=$count+1; 
    $cid = $item['phone_id']; 
    echo "<tr data-position='$count' id='$cid'>"; 
    echo "<td>" . $count . "</td>"; 
    echo "<td><img src='" . $item['image'] . "' width='50px' height='50px'></td>"; 
    echo "<td>" . $item['brand_name'] . "</td>"; 
    echo "<td>" . $item['product_name'] . "</td>"; 
    echo "<td>" . $item['score'] . "</td>"; 
    echo "<td id='$cid'><a href='#' class='rowtag' id='$cid'><i class=\"fa fa-times fa-1x\"></i></a></td>"; 
    echo "</tr>"; 
} 
?> 

Столбец индекс не должен быть виден, вы можете скрыть это так:

var table = $('#example').dataTable({ 
    rowReorder: true, 
    columnDefs : [ { targets : [0], visible: false } ] 
}); 

---

Если у вас есть таблица на основе разметки HTML (а не источника данных), вы можете создать индексный столбец программно до инициализация Datatable:

$('<th>').text('#').prependTo($('#example thead tr')) 
$("#example tbody tr").each(function(i, tr) { 
    $(tr).attr('id', 'id'+i) 
    $('<td>').text(i).prependTo(tr) 
}) 

, приведенный выше заполняет таблицу с колонкой # индекса и дает каждому <tr> уникальный id.