交换两行后，jQuery DataTable 的行索引不会更新（rowReordering 插件）答案

【问题标题】：jQuery DataTable's row indexes are not updated after two rows have been swapped (rowReordering plugin)交换两行后，jQuery DataTable 的行索引不会更新（rowReordering 插件）
【发布时间】：2015-08-15 11:40:36
【问题描述】：

我正在使用 jQuery DataTables 的 rowReordering 插件来让用户拖放行。以下是相关代码：

    ui_actions = $('#ui_actions').DataTable({
          "createdRow": function( row, data, dataIndex ) 
          {
             $(row).attr('id', 'row-' + dataIndex);
             ui_actions.$('tr.selected').removeClass('selected');
              $(row).addClass('selected');

          },
   });
   ui_actions.draw();
   ui_actions.rowReordering({
        fnUpdateCallback: function(row){
          ...
        }
   });

如果交换了两行（让我们考虑索引为 1 和 2 的行），那么这行代码：

ui_actions.row(0).data()

将从当前索引 1 处的行数据返回，而不是 0。

这种行为是不希望的。如何确保行索引正在更新？

【问题讨论】：

所以您希望ui_actions.row(0).data() 返回当前的第一行，而不是重新排序之前的第一行，对吧？
是的。我通过清除表格并读取所有行来解决这个问题。但可能有更有效的解决方案？

标签： javascript jquery html datatables row

【解决方案1】：

原因

行索引0 用作row-selector for row() API 方法是在初始化期间分配的内部索引，不代表项目的位置，请参阅row().index() 了解更多信息。

解决方案

使用 jQuery 选择器作为row() API 方法的参数来访问第一行的数据：

var rowdata = ui_actions.row('tr:eq(0)').data();

或者使用rows() API 方法来访问第一行的数据：

var data = ui_actions.rows().data();
var rowdata = (data.length) ? data[0] : null;

演示

$(document).ready( function () {
   var table = $('#example').DataTable({
      "createdRow": function( row, data, dataIndex ) {
         $(row).attr('id', 'row-' + dataIndex);
      }    
   });

   for(var i = 1; i <= 100; i++){
      table.row.add([ 
         i,
         i + '.2',
         i + '.3',
         i + '.4',
         i + '.5',
         i + '.6'
      ]);
   }  

   table.draw();

   table.rowReordering();
  
   $('#btn-log').on('click', function(){
      var rowdata = table.row('tr:eq(0)').data();
      console.log('Method 1', rowdata);
     
      var data = table.rows().data();
      rowdata = (data.length) ? data[0] : null;
      console.log('Method 2', rowdata);
   });
} );

<!DOCTYPE html>
<html>

<head>
<meta charset=utf-8 />
<title>jQuery DataTables</title>  
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<script src="https://cdn.rawgit.com/mpryvkin/jquery-datatables-row-reordering/95b44786cb41cf37bd3ad39e39e1d216277bd727/media/js/jquery.dataTables.rowReordering.js"></script>
</head>
  
<body>
<p><button id="btn-log" type="button">Log</button>
<table id="example" class="display" 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>

<tfoot>
<tr>
  <th>Name</th>
  <th>Position</th>
  <th>Office</th>
  <th>Age</th>
  <th>Start date</th>
  <th>Salary</th>
</tr>
</tfoot>

<tbody>
</tbody>
</table>
</body>
</html>

【讨论】：