datatable row reorder completion, not getting updated row id

问题

I am working on datatable. I have used reorder functionality, it works, but I am not getting its updated reorder row id, it always fetching old row id. Here I have put my code for it. Can anyone please check my code and help me to resolve this issue?

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++;
  })

});

回答1:

You can use a combination of the following two events to track which specific row was moved: pre-row-reorder and row-reordered.

The pre-row-reorder event tells you which specific row is being dragged.

The row-reordered event provides a list of all changes (for each change it gives the before index and the after index).

Note that all index values are zero-based (row 1 is index 0).

Here is a self-contained demo:

<!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>

The console output for a typical drag and drop event will be:

row moved from index 4 to index 1

来源：https://stackoverflow.com/questions/63115844/datatable-row-reorder-completion-not-getting-updated-row-id

标签

datatables