在具有动态行添加的 jQuery 行重新排序数据表中显示行索引列

Question

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

但是，在该示例中，table 是通过静态 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>

所以问题是：如何在我的 table 中显示每当用户移动一行时都会更新的行号？

Answer 1

原因

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

解决方案

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

Table 应该有一个合适的结构，下面是 manual:

的摘录

Table must be properly formatted according to the DataTables requirements e.g. it must have THEAD, TBODY and optionally TFOOT sections

Each TR element must have id attribute.

One column in the table should be indexing column. This column will be used for determining position of the row in the table. By default this is first column in the table.

演示版

$(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 行重新排序数据表中显示行索引列

Show row index column in a jQuery Row Reordering DataTable with dynamic row adding

html

jquery

row

html-table

datatables