在带有动态行添加的 jQuery Row Reordering DataTable 中显示行索引列答案

【问题标题】：Show row index column in a jQuery Row Reordering DataTable with dynamic row adding在带有动态行添加的 jQuery Row Reordering DataTable 中显示行索引列
【发布时间】：2015-10-12 08:09:36
【问题描述】：

我查看了this example，您可以在其中看到行索引正在显示，并且随着用户移动行而动态更新 - 这正是我所期望的行为。

但是，在该示例中，表格是通过静态 HTML 代码生成的。我正在使用来自 DataTable api 的 row.add() 方法。

为简单起见，我将向您展示一个示例，其中我通过一个简单的 for 循环添加行。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link href="../css/jquery.dataTables.css" rel="stylesheet"/>
    <script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>
    <script src="../lib/jquery.dataTables.rowReordering.js"> </script>
  <script>
  $(function() {

     $('#demo').html('<table cellpadding="0" cellspacing="0" border="0" class="display cell-border"  id="example" ></table>');

        t = $('#example').dataTable({
            "columns": 
            [
                {"title": "Action", "data": "action" },
            ],
        }).rowReordering();;
        for (var i = 0; i < 10; i ++)
        {
            t.api().row.add(
            {
                action: 'action'+String(i),
            }).draw();
        }    

  });
  </script>
</head>
<body>
<div id="demo"> </div>
</body>
</html>

所以问题是：如何在表格中显示用户移动行时更新的行号？

【问题讨论】：

标签： jquery html datatables row html-table

【解决方案1】：

原因

原Row Reordering add-on与DataTables 1.10不兼容。

解决方案

我有 forked the add-on on github 并添加了对 DataTables 1.10 的支持通过使用 legrand....@gmail.com 在comments 中的建议。

表格应该有适当的结构，下面是manual的摘录：

表格必须根据 DataTables 要求正确格式化，例如它必须有THEAD、TBODY 和可选的TFOOT 部分

每个TR 元素都必须有id 属性。

表中的一列应该是索引列。此列将用于确定表中行的位置。默认情况下，这是表中的第一列。

演示

$(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();
} );

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

【讨论】：

行重新排序在您的示例中似乎不起作用？
@user3262713，更正了修改后插件的链接，立即尝试。