Question

我查看了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>

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

Answer 1

<强>原因

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

<强>解

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

表格应该有一个合适的结构，下面是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>

在jQuery行中显示行索引列重新排序DataTable并添加动态行

1 个答案: