Question

我正在使用jquery.dataTables.rowReordering.js插件重新排序我的数据拖动工作但是drop不起作用，它在鼠标离开时转到相同的位置。以下是代码。

   <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

calc要求您拥有索引列，并为所有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>";
}
?>

当你有一个基于HTML标记的表（不是数据源）时，你可以在初始化dataTable之前以编程方式创建索引列：

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

以上内容使用$('<th>').text('#').prependTo($('#example thead tr')) $("#example tbody tr").each(function(i, tr) { $(tr).attr('id', 'id'+i) $('<td>').text(i).prependTo(tr) })索引列填充表格，并为每个#提供唯一的<tr>。

jquery dataTable重新排序插件拖动工作但是drop不起作用

1 个答案: