时间戳

首页 > 解决方案 > 数据表行重新排序完成，未获得更新的行 ID

datatables - 数据表行重新排序完成，未获得更新的行 ID

问题描述

我正在处理数据表。我使用了重新排序功能，它可以工作，但我没有得到它更新的重新排序行 ID，它总是获取旧的行 ID。在这里，我放了我的代码。任何人都可以检查我的代码并帮助我解决这个问题吗？

table_all_projects.on('row-reorder.dt', function(dragEvent, data, nodes) {
  //console.log("all nodes");
  var n = 0;
  table_all_projects.rows({
    order: 'current'
  }).every(function(rowIdx, tableLoop, rowLoop) {
    console.log(this.data().id);
    console.log(rowIdx);
    $("#loading").show();
    var row_id = this.data().id;
    //var rowData = table_all_projects.row(data[i].node).data();
    $.ajax({
      type: "POST",
      url: ajax_object.ajax_url,
      data: {
        "id": row_id,
        "action": "WCP_Projects_Controller::update_order_subportal",
        "order_id": rowIdx
      },
      dataType: "json",
      async: false,
      success: function() {
        if (table_all_projects.rows().count() == order_id) {
          $("#loading").hide();
        }
      }
    });
    n++;
  })

});

标签： datatables

解决方案

您可以使用以下两个事件的组合来跟踪移动了哪个特定行：pre-row-reorder和row-reordered.

该pre-row-reorder事件告诉您正在拖动哪个特定行。

该row-reordered事件提供了所有更改的列表（对于每个更改，它都会提供前索引和后索引）。

请注意，所有索引值都是从零开始的（第 1 行是索引 0）。

这是一个独立的演示：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">

  <!-- row reorder -->
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowreorder/1.2.7/css/rowReorder.dataTables.min.css"/> 
  <script type="text/javascript" src="https://cdn.datatables.net/rowreorder/1.2.7/js/dataTables.rowReorder.min.js"></script>

</head>

<body>

<div style="margin: 20px;">

    <table id="example" class="display dataTable cell-border" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>Tokyo</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
            </tr>
            <tr>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>2012/12/02</td>
                <td>$372,000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

</div>

<script type="text/javascript">

$(document).ready(function() {

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

  var originalIndex;

  table.on( 'pre-row-reorder', function ( e, node, index ) {
    originalIndex = node.index;
    //console.log( "old index: " + originalIndex );
  } );

  table.on( 'row-reordered', function ( e, diff, edit ) {
    for ( var i = 0; i < diff.length ; i++ ) {
      if (diff[i].oldPosition === originalIndex) {
        //console.log( "new index: " + diff[i].newPosition );
        console.log( "row moved from index " + originalIndex +
            " to index " + diff[i].newPosition );
      }
    }
  } );

} );

</script>

</body>
</html>

典型拖放事件的控制台输出将是：

row moved from index 4 to index 1

推荐阅读